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

Question

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

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

score 16 · Accepted Answer

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

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

score 2 · Accepted Answer

上面的例子很好，但是如果div之间有边距，并且您不希望鼠标悬停在空白区域时触发效果，则不需要javascript。

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

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

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

2 回答 2