☰

:hover の反対の CSS 疑似クラスはありますか? 質問する

tag-icon • tag-icon css css-selectors hover pseudo-class
:hover の反対の CSS 疑似クラスはありますか? 質問する

CSSに指定するための疑似クラスはありますか？

:not(:hover)

それとも、ホバーされていないアイテムを指定する唯一の方法はそれですか?

いくつかの CSS3 リファレンスを確認しましたが、:hover の反対を指定する CSS 疑似クラスについては何も言及されていません。

ベストアンサー1

はい、使います: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>

別の例として、次のようなことが考えられます。「1 つの要素をホバーすると、他のすべての要素が暗くなります」。

私の仮定が正しく、すべてのセレクターが同じ親の中にあると仮定すると、次のようになります。

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

おすすめ記事