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

Question 1

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

:not(:hover)

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

いくつかのCSS3参照を調べましたが、：hoverの反対を指定するCSS疑似クラスについての言及はありません。

Question 2

はい、使用します :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;
}
.child:hover{
   opacity: 1;
}

Question 3

そのような疑似クラスはありません。を使用できる場合は、存在する必要はありません:not(:hover)。:not()疑似クラスの要点は、要素が疑似クラスにのみ一致するか一致しないかのいずれかである既存の（および将来の）動的疑似クラスごとに個別の否定を指定することなく、作成者が否定を記述できるようにすることです。

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

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

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

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

これは、イベントと状態について説明する次の質問と同じではないことに注意してください（元々:focusはで:hoverはなく、同じ原則が適用されます）：CSSには：blurセレクター（疑似クラス）がありますか？

Question 4

他の何かにカーソルを合わせたときにのみ何かを表示したい場合は、uを使用できます

selector:not(:hover)

このような：

section{
   font-size:3em;
}

div:not(:hover) + section{
 display:none;
}

<div>Hover on me</div>

<section>Peek A Boo!</section>

スニペットを展開

あなたが心に留めておくべきである使用するとき、いくつかの異常な効果と結果があり:not()ます：

:not(:not(...))、:not(p::before)できません
:not(*) 明らかに適用されることはありません
:not(.foo)および.fooなどのタグを含む、一致しないものすべてに一致します<HTML><body>
ルールの特異性を高めます。#foo:not(#bar)たとえば#foo、：は単純なものと同じ要素に一致しますが、特異性は高くなります。

andでの操作:not：

ない要素<div>はない<span>要素： body :not(div):not(span){}

orでの操作:not、これはまだ十分にサポートされていません。

そうでない要素.crazyまたは.fancy：body :not(.crazy, .fancy){}

ソースMDN

Question 5

a {
  /*styles*/
}

正常です（ホバーされていないリンク）

a:hover {
  /*styles*/
}

ホバーされたリンクです