如何执行多个事件CSS

时间:2014-06-24 15:00:48

标签: jquery html css css3

这一直困扰着我一段时间,我想知道什么是使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:将图标更改为红色,文本会添加文字阴影等。

2 个答案:

答案 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;
}