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

Question

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

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

Answer 1

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

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