:ホバーしますが:特定のクラスではありません


88

クラスaを持つa要素ではなく、要素にホバー効果を適用するにはどうすればよいactiveですか?

a:hover(not: .active)

何かが足りないようです。

回答:


176

機能表記はオンですが:not()、ではありません:hover

a:not(.active):hover

あなたが:hover最初に置くことを好むなら、それは問題ありません:

a:hover:not(.active)

どちらの疑似クラスが最初または最後に来るかは関係ありません。どちらの方法でも、セレクターは同じように機能します。:hover構造的な疑似クラスの後ろにユーザーインタラクションの疑似クラスを配置する傾向があるので、最後に置くのはたまたま私の個人的な慣習です。


1
バージョン9より前のIEをサポートする必要がある場合は、not() msdn.microsoft.com / en-us / library / …をサポートしていないように見えるので注意してください。もしそうなら、おそらく@Mendhakによる答えを見てください。
SharpC 2017年

7

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

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

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

大勢のユーザーをターゲットにしていて、古いブラウザをサポートしたい場合は、のスタイルを定義して、で.active:hover行っていることをすべて元に戻すのが最善の方法ですa:hover

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.