: hover, ale: nie na określonej klasie

88

Jak zastosować efekt najechania na aelement, ale nie na aelement z klasą active?

a:hover(not: .active)

Wydaje się, że czegoś brakuje.

html css css-selectors

— Jürgen Paul
źródło

176

Notacja funkcjonalna jest włączona :not(), a nie :hover:

a:not(.active):hover

Jeśli wolisz postawić na :hoverpierwszym miejscu, w porządku:

a:hover:not(.active)

Nie ma znaczenia, która pseudoklasa jest pierwsza czy ostatnia; tak czy inaczej, selektor działa tak samo. Tak się składa, że moim osobistą konwencją jest umieszczanie na :hoverostatnim miejscu, ponieważ mam tendencję do umieszczania pseudoklasy interakcji użytkownika za pseudoklasami strukturalnymi.

— BoltClock
źródło

1

Zachowaj ostrożność, jeśli potrzebujesz obsługi IE przed wersją 9, ponieważ wydaje się, że nie obsługują not() msdn.microsoft.com/en-us/library/… . Być może zobacz odpowiedź od @Mendhak, jeśli tak.

— SharpC,

7

Masz możliwość skorzystania z not()selektora.

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

Jednak może to nie działać we wszystkich przeglądarkach, ponieważ nie wszystkie przeglądarki obsługują funkcje CSS3.

Jeśli kierujesz reklamy do dużej grupy odbiorców i chcesz obsługiwać starsze przeglądarki, najlepszym sposobem byłoby zdefiniowanie stylu .active:hoveri cofnięcie tego, co robisz a:hover.

— Mendhak
źródło