当一个元素悬停时，更改所有其他元素的样式

Question

假设我在同一个DOM级别上有一堆div。当我将鼠标悬停在一个上面时，我希望所有其他人改变风格（即减少不透明度或改变背景），而悬停的那个保持不变。

我不能使用+或~选择器，因为我需要它来选择所有兄弟姐妹，而不仅仅是直接相邻的兄弟姐妹或只有以下兄弟姐妹。基本上我正在寻找的是“所有兄弟姐妹，但这一个”选择器。这存在吗？有没有办法实现这个没有JavaScript ？

Answer 1

诀窍是将悬停伪选择器放在父元素上，然后相应地设置子项的样式。这就是我所说的：

.parent:hover .child {
    opacity: .5;
}
.parent .child:hover {
    opacity: 1;
}

以下是演示：http://jsfiddle.net/joshnh/FJAYk/

Answer 2

上面的示例非常好，但是如果div之间有余量而你不想在悬停在空白空间时触发效果，则不需要javascript。

这是一个简单的解决方法：

只需将float:left添加到.child，并确保.parent有overflow:visible（默认情况下应该可见）。

通过执行此操作，.parent变为0px高（因此空白空间不会触发效果），但将鼠标悬停在.child上会触发:hover个伪类。