0

Подскажите пожалуйста, как заставить поменять css свойства одного блока при наведении на элемент другого блока?

Например:

                 <div class="filter-wrapp">
                    <div class="filter-misc">
                        <span>Пол питомца</span>
                        <div class="btn-checkbox">
                            <input id="pets-male" type="checkbox">
                            <label for="pets-male">
                                Мальчик
                            </label>
                        </div>
                        <div class="btn-checkbox">
                            <input id="pets-female" type="checkbox">
                            <label for="pets-female">
                                Девочка
                            </label>
                        </div>
                    </div>
                </div>
                <div class="age-wrapp" id="age-wrapp">
                    <span>Брать взрослых питомцев выгодно. Смотри плюсы:</span>
                    <div class="info">
                        <ul>
                            <li>Приучены к туалету</li>
                            <li>Коты знают когтеточку, а собаки не грызут обувь</li>
                            <li>Характер и внешность сформированы и не изменятся</li>
                            <li>Легче идут на контакт, знают детей и других питомцев</li>
                            <li>Не скачут по дому, не нападают из-за угла и т.д.</li>
                        </ul>
                        <ul>
                            <li>Меньше требований к еде и частоте кормления</li>
                            <li>Не требуют возрастнова ухода и гигиены</li>
                            <li>Меньше подвержены болезням</li>
                            <li>Спокойно остаются одни дома в рабочий день</li>
                        </ul>
                    </div>
                </div>

блок age-wrapp имеет display none, но есть необходимость, чтобы при наведении именно на чекбокс блок age-wrapp становился display block. Пробовал и просто "label:hover" и "label:hover +" и "label:hover ~", он не хочет появляться. Или только через js остается? И элемент на таком уровне не сможет влиять на другой из другого блока и уровнем выше?

1
  • Спасибо за подробный ответ! Буду думать))
    – Eugen Glau
    27 сен 2021 в 7:33

1 ответ 1

0

С вашей вёрсткой только js, но можете немного вёрстку изменить и обойтись только css.

.age-wrapp {
  display: none;
}

.btn-checkbox {
  padding: .5rem;
  margin-bottom: 1rem;
  border: 1px dashed purple;
  cursor: pointer;
}

.btn-checkbox:hover~.age-wrapp {
  display: block;
}
<div class="filter-wrapp">
  <div class="filter-misc">
    <span>Пол питомца</span>
    <div class="btn-checkbox">
      <input id="pets-male" type="checkbox">
      <label for="pets-male">Мальчик</label>
    </div>
    <div class="btn-checkbox">
      <input id="pets-female" type="checkbox">
      <label for="pets-female">Девочка</label>
    </div>
    <div class="age-wrapp" id="age-wrapp">
      <span>Брать взрослых питомцев выгодно. Смотри плюсы:</span>
      <div class="info">
        <ul>
          <li>Приучены к туалету</li>
          <li>Коты знают когтеточку, а собаки не грызут обувь</li>
          <li>Характер и внешность сформированы и не изменятся</li>
          <li>Легче идут на контакт, знают детей и других питомцев</li>
          <li>Не скачут по дому, не нападают из-за угла и т.д.</li>
        </ul>
        <ul>
          <li>Меньше требований к еде и частоте кормления</li>
          <li>Не требуют возрастнова ухода и гигиены</li>
          <li>Меньше подвержены болезням</li>
          <li>Спокойно остаются одни дома в рабочий день</li>
        </ul>
      </div>
    </div>

  </div>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.