这一直困扰着我一段时间,我想知道什么是使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:将图标更改为红色,文本会添加文字阴影等。
答案 0 :(得分:7)
:hover
父元素:
.box:hover h1 {
/* styles */
}
.box:hover span {
/* different styles */
}
答案 1 :(得分:0)
在您的情况下,您可以将:hover
用于父元素,如下所示:
a:hover h1 {
color: blue;
}
a:hover span {
color: red;
}
不是针对您的具体情况,但您也可以使用兄弟选择器来定位下一个兄弟,例如:
.element:hover + .next-sibling {
color: red;
}