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

【问题标题】：Change style of all other elements when one element is hovered悬停一个元素时更改所有其他元素的样式
【发布时间】：2012-09-07 06:36:28
【问题描述】：

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

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

【问题讨论】：

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

上面的例子很不错，但是如果div之间有margin，又不想鼠标悬停在空白处触发效果，就不需要javascript了。

这里有一个简单的解决方法：

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

通过这样做，.parent 变为 0px 高（因此空白空间不会触发效果），但悬停在 .child 上会触发 :hover 伪类。

【讨论】：