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

前端之家收集整理的这篇文章主要介绍了css – 当一个元素悬停时,更改所有其他元素的样式前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
假设我在同一个DOM级别上有一堆div.当我将鼠标悬停在一个上面时,我希望所有其他人改变样式(即减少不透明度或改变背景),而悬停的那个保持不变.

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

解决方法

诀窍是将悬停伪选择器放在父元素上,然后相应地设置子项的样式.这是我所说的:
.parent:hover .child {
    opacity: .5;
}
.parent .child:hover {
    opacity: 1;
}

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

原文链接:https://www.f2er.com/css/215989.html

猜你在找的CSS相关文章