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

Question

9

假设我有一堆位于同一DOM级别的div。当我悬停在其中一个上时，我希望所有其他div都改变样式（例如降低不透明度或更改背景），而被悬停的那个保持不变。

我不能使用+或~选择器，因为我需要选择所有兄弟节点，而不仅仅是直接相邻的兄弟节点或仅后面的兄弟节点。基本上，我正在寻找的是“除了这个之外的所有兄弟节点”选择器。这个存在吗？是否有一种方法可以实现这一点没有使用JavaScript？

- Bobe

2个回答

2

上面的例子非常好，但如果div之间有边距，而且你不希望在悬停在空白空间上时触发效果，则无需使用JavaScript。

以下是一个简单的解决方法：

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

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

- mtt

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- joshnh · Accepted Answer

关键是将hover伪选择器放在父元素上，然后相应地样式化子元素。这就是我所指的：

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