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

Posted 2023-05-08

【中文标题】悬停一个元素时更改所有其他元素的样式

【英文标题】：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;

这是一个演示：http://jsfiddle.net/joshnh/FJAYk/

【讨论】：

哇，真是小事一桩，想不到都觉得惭愧。谢谢。

但是等等，有一个问题。我提到的这些 div 之间有很多空白空间，我不希望它们只是通过将光标放在父 div 中而变暗。

这就是问题所在。如果您不希望这样，javascript 是您的最佳选择。

生活从来都不容易，不是吗？好吧，谢谢你证实了我的怀疑。

【参考方案2】：

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

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

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

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