:hover是否有相反的CSS伪类? [英] Is there an opposite CSS pseudo-class to :hover?

问题描述

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;
}

jsBin演示

另一个例子；我想您要:当鼠标悬停时，使所有其他元素变暗"..

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;
}

这篇关于:hover是否有相反的CSS伪类?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！