: hover but: bukan pada kelas tertentu

89

Bagaimana cara menerapkan efek hover pada aelemen, tetapi tidak pada aelemen dengan kelas active?

a:hover(not: .active)

Sepertinya ada sesuatu yang hilang.

html css css-selectors Jürgen Paul
sumber

Jawaban:

178

Notasi fungsional aktif :not(), bukan :hover:

a:not(.active):hover

Jika Anda lebih suka mengutamakan :hover, tidak apa-apa:

a:hover:not(.active)

Tidak masalah kelas semu mana yang lebih dulu atau terakhir; apa pun itu, pemilih bekerja sama. Itu hanya kebetulan menjadi konvensi pribadi saya untuk diletakkan :hoverterakhir karena saya cenderung menempatkan pseudo-class interaksi pengguna di belakang pseudo-class struktural.

BoltClock
sumber
1
Berhati-hatilah jika Anda perlu mendukung IE sebelum versi 9 karena tampaknya mereka tidak mendukung not() msdn.microsoft.com/en-us/library/… . Mungkin melihat jawaban oleh @Mendhak jika Anda melakukannya.
SharpC
7

Anda memiliki opsi untuk menggunakan not()selektor. 

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

Namun, ini mungkin tidak berfungsi di semua browser, karena tidak semua browser menerapkan fitur CSS3.

Jika Anda menargetkan audiens dalam jumlah besar dan ingin mendukung browser lama, cara terbaik adalah dengan menentukan gaya untuk .active:hoverdan membatalkan apa pun yang Anda lakukan a:hover.

Mendhak
sumber