: hover but : not on a specific class


88

a요소 에 호버 효과를 적용 a하고 클래스 가있는 요소에는 어떻게 적용 active합니까?

a:hover(not: .active)

뭔가 빠진 것 같습니다.

답변:


176

기능 표기법은 다음이 :not()아닌 on입니다 :hover.

a:not(.active):hover

:hover먼저 넣으려면 괜찮습니다.

a:hover:not(.active)

어떤 의사 클래스가 처음인지 마지막인지는 중요하지 않습니다. 어느 쪽이든 선택기는 동일하게 작동합니다. :hover구조적 의사 클래스 뒤에 사용자 상호 작용 의사 클래스를 배치하는 경향이 있기 때문에 마지막으로 두는 것이 내 개인적인 관습 입니다.


1
버전 9 이전에 IE를 지원해야한다면 not() msdn.microsoft.com/en-us/library/…를 지원하지 않는 것처럼 보이므로주의 하십시오 . 그렇다면 @Mendhak의 답변을 볼 수 있습니다.
SharpC

7

not()선택기 를 사용하는 옵션이 있습니다.

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

그러나 모든 브라우저가 CSS3 기능을 구현하는 것은 아니므로 모든 브라우저에서 작동하지 않을 수 있습니다.

많은 사용자를 대상으로하고 이전 브라우저를 지원하려는 경우 가장 좋은 방법은에 대한 스타일을 정의 .active:hover하고에서 수행중인 작업을 실행 취소하는 것입니다 a:hover.

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.