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

假设我在同一个DOM级别上有一堆div.当我将鼠标悬停在一个上面时,我希望所有其他人改变样式(即减少不透明度或改变背景),而悬停的那个保持不变.

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

解决方法

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

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

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

原文地址：https://www.jb51.cc/css/215989.html