如何执行多个事件CSS

Question

这一直困扰着我一段时间，我想知道什么是使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？

I.E：将图标更改为红色，文本会添加文字阴影等。

Answer 1

而是

:hover父元素：

.box:hover h1 {
   /* styles */
}
.box:hover span {
   /* different styles */
}

Answer 2

在您的情况下，您可以将:hover用于父元素，如下所示：

a:hover h1 {
   color: blue;
}

a:hover span {
   color: red;
}

不是针对您的具体情况，但您也可以使用兄弟选择器来定位下一个兄弟，例如：

.element:hover + .next-sibling {
   color: red;
}