：ホバー：特定のクラスではない

Question

a要素にホバー効果を適用しますが、active要素を持つa要素にホバー効果を適用するにはどうすればよいですか？

a:hover(not: .active) 

何かが欠落しているようです。

Answer 1

機能の表記は上の:not()、ない:hoverです：あなたは:hover最初に置くことを好む場合

a:not(.active):hover 

、それは大丈夫です：疑似クラスが最初に来るどの問題ではありません

a:hover:not(.active) 

または最後に。どちらの方法でも、セレクタは同じ動作をします。 :hoverを私の個人的な大会にするのは、ユーザーインタラクション疑似クラスを構造的な疑似クラスの背後に置く傾向があるためです。

Answer 2

not()セレクタを使用するオプションがあります。

a:not(.active):hover { ... } 

ただし、すべてのブラウザがCSS3機能を実装しているわけではないため、すべてのブラウザで機能するとは限りません。

多くのユーザー層をターゲットにしており、古いブラウザをサポートしたい場合は、.active:hoverのスタイルを定義し、何でもしている間に元に戻すのが最も良い方法です。a:hover。