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

Question

Подскажите пожалуйста, как заставить поменять 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 остается? И элемент на таком уровне не сможет влиять на другой из другого блока и уровнем выше?

Answer 1

С вашей вёрсткой только 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>

БЛОГ НА HUSL

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

Ответы (1 шт):