問題描述

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

這篇關于是否有與 :hover 相對的 CSS 偽類?的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！