BinaryDevelop
  1. ホーム
  2. css

[解決済み] hoverと反対のCSS擬似クラスはありますか？

2022-03-09 22:12:45

質問

を指定するCSSの擬似クラスはありますか？ 

:not(:hover)

それとも、ホバーされていない項目を指定する方法しかないのでしょうか？

CSS3のリファレンスをいくつか見てみましたが、:hoverの反対を指定するCSS擬似クラスについての言及はありませんね。

どのように解決するのですか？

はい、使用します。 :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;
}

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します