是否有与 :hover 相对的 CSS 伪类?

2022-01-10 00:00:00 css-selectors hover css pseudo-class

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

相关文章