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