#jquery #html #css
#jquery #HTML #css
Вопрос:
Это некоторое время не давало мне покоя, мне было интересно, каков наилучший способ заставить все элементы внутри div действовать по-разному при наведении курсора мыши.
Пример HTML
<div class="box">
<a href="">
<h1>Box Title</h1>
<span class="icon floatr"></span>
</a>
</div>
Теперь я обычно выполняю следующий css;
a.span {color:black}
a.span:hover {color:red;}
Но есть ли способ сгруппировать их вместе; так что при наведении он будет использовать два разных селектора без использования JS?
То есть: измените значок на красный, а текст добавит текстовую тень или что-то в этом роде.
Комментарии:
1. Пожалуйста, примите ответы на ваши предыдущие вопросы , чтобы побудить других помочь вам в будущем.
Ответ №1:
:hover
родительский элемент вместо:
.box:hover h1 {
/* styles */
}
.box:hover span {
/* different styles */
}
Комментарии:
1. Будет ли это работать независимо от того, где находится целевая область наведения? Или диапазон изменится только при наведении курсора мыши на его точные координаты?
2. Он запускается всякий раз, когда вы
hover
переходите к.box
элементу. Попробуйте.
Ответ №2:
В вашем случае вы можете использовать :hover
для родительского элемента, например, так:
a:hover h1 {
color: blue;
}
a:hover span {
color: red;
}
Не для вашего конкретного случая, но вы также можете использовать селектор sibling, чтобы настроить таргетинг только на следующего sibling, например:
.element:hover .next-sibling {
color: red;
}