问题描述
CSS中是否有伪类来指定
Is there a pseudo-class in CSS to specify
:not(:hover)
或者这是指定未悬停的项目的唯一方法?
Or is that the only way to specify an item that is not being hovered?
我浏览了几个 CSS3 引用,但我没有看到任何提到 CSS 伪类来指定 :hover 的反面.
I went through several CSS3 references, and I see no mention of a CSS pseudo-class to specify the opposite of :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>
另一个例子;我想你想:当一个悬停时,使所有其他元素变暗".
Another example; I think you want to: "when one is hovered, dim all other elements".
如果我的假设是正确的,并且假设所有选择器都在同一个父级中:
If my assumption is correct, and assuming all your selectors are inside the same parent:
.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>
否则……只需使用默认逻辑:
Otherwise... simply use the default logic:
.child{ opacity: 0.2; } .child:hover{ opacity: 1; }