CSS中有没有伪类来指定
:not(:hover)
或者这是指定未悬停的项目的唯一方法？
我浏览了几个 CSS3 参考资料，但没有看到任何提及 CSS 伪类来指定 :hover 的相反内容。
是的，使用:not(:hover)
.child:not(:hover){
opacity: 0.3;
}
.child {
display: inline-block;
background: #000;
border: 1px solid #fff;
width: 50px;
height: 50px;
transition: 0.4s;
}
.child:not(:hover) {
opacity: 0.3;
}
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
另一个例子;我想你想要：“当其中一个元素悬停时，所有其他元素都变暗”.
如果我的假设是正确的，并且假设所有选择器都位于同一个父级中：
.parent:hover .child{
opacity: 0.2; // Dim all other elements
}
.child:hover{
opacity: 1; // Not the hovered one
}
.child {
display: inline-block;
background: #000;
border: 1px solid #fff;
width: 50px;
height: 50px;
transition: 0.4s;
}
.parent:hover .child {
opacity: 0.3;
}
.parent .child:hover {
opacity: 1;
}
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
否则...只需使用默认逻辑：
.child{
opacity: 0.2;
}
.child:hover{
opacity: 1;
}
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
