Как выполнить несколько событий CSS

#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:

: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;
}