: 마우스를 올리지만 특정 클래스가 아닌 경우

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에서 수행중인 작업을 취소하는 것입니다.