web-dev-qa-db-ja.com

：hoverとは反対のCSS擬似クラスはありますか？

CSSに指定する擬似クラスはありますか

:not(:hover)

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

私はいくつかのCSS3リファレンスを調べましたが、：hoverの反対を指定するCSS疑似クラスについては言及していません。

csscss3css-selectorspseudo-class
56
RockPaperLizard

はい、:not(:hover)を使用します

.child:not(:hover){
  opacity: 0.3;
}

jsBinデモ

もう一つの例; "ホバーされたとき、他のすべての要素を暗くする"。

私の仮定が正しく、すべてのセレクターが同じ親の中にあると仮定した場合：

.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;       // Yey, not hovered!
}
.child:hover{
   opacity: 1;         // ME! ME! ME!
}
77
Roko C. Buljan

そのような擬似クラスはありません。単に:not(:hover)を使用できる場合は、その必要はありません。 :not()擬似クラスのポイントは、作成者が既存の（および将来の）動的擬似クラスごとに個別の否定を指定せずに否定を記述できるようにすることです。クラス。

たとえば、一部の要素のみが:enabledまたは:disabledのいずれかになります—ほとんどの要素はneitherです。セマンティクスが単純に適用されないためです—しかし、要素はポインティングデバイス（:hover）によってのみ指定できますしない（:not(:hover)）。 :not()を使用して既に直接達成できる否定を提供すると、その有用性が大きく損なわれます（ただし、他の単純なセレクターを否定するために使用することもできます—または 複雑なセレクター全体 将来的に）。

そのような擬似クラスが計算的に安価になるという議論はかなり弱いです。このような擬似クラスの最も単純な実装は、リテラル:not(:hover)チェックであり、これはましです。より複雑な、または最適化された実装であり、:not(:hover)と同じかそれ以上の擬似クラスを実装するようベンダーに求めています。簡単にアクセスできるカスケードおよび:not(:hover)（カスケードがオプションでない場合）。 100％機能的に同等である少なくとも1つの既存のメソッド（およびシナリオの少なくとも 80％ ）。また、このような擬似クラスの名前付けの問題もあります。名前を提案していないので、良い名前も思いつきません。 :not-hoverは2バイトだけ短く、入力する作業がわずかに少ないだけです。どちらかといえば、それは潜在的にmore:not(:hover)よりも紛らわしいです。

特異性が心配な場合は、 :not()疑似クラス自体は特異性にカウントされず、その最も具体的な引数のみがカウントされます に注意してください。 :not(:hover)と:hoverは同様に固有です。したがって、特異性も問題ではありません。

ブラウザのサポートが心配な場合、このような擬似クラスは、導入された場合、:not()とともに、または後のレベルのセレクターで、CSS2（:hoverが表示されなかったため） 17年以上前に最初に導入され、もう1年前にIE4で初めて実装されました）。ブラウザーがこの新しい疑似クラスの実装を開始するまで作成者は単に:not(:hover)の使用を続けざるを得ず、切り替える理由がないため、後のレベルで導入することは無意味です。

これは次の質問と同じではないことに注意してください。これはイベントと状態について話します（元々:focusではなく:hoverについてですが、同じ原則が適用されます）： Does have a a blur selector（pseudo-class ）？

2
BoltClock
a {
  /*styles*/
}

通常（ホバーされていないリンク）

a:hover {
  /*styles*/
}

ホバーリンクです

0
nikola_wd