:before 및 :after 의사 요소에 :hover 스타일을 적용하는 방법은 무엇입니까?

:before 및 :after 요소에 대한 hover 조건

문제

":hover"를 ":before"에 적용하는 데 어려움이 있습니다. 강요. ":before:hover"를 사용하려는 시도는 효과가 없는 것으로 입증되었습니다.

설명

상위 요소의 ":hover" 상태를 기반으로 ":before" 요소에 스타일을 적용하는 올바른 구문은 다음과 같습니다. :hover:before 또는 a:visited:before. 의사 요소는 선택기 끝에 의사 클래스 뒤에 추가됩니다.

CSS3에서는 의사 요소를 나타내기 위해 이중 콜론(::)을 사용하여 이러한 구분을 명확히 할 수 있습니다. 따라서 올바른 구문은 a:hover::before 및 a:visited::before가 됩니다. 그러나 IE8과 같은 레거시 브라우저에서는 단일 콜론이 여전히 허용됩니다.

이 구문은 CSS 사양에 따라 결정되며, CSS 사양에서는 단순 선택기의 최종 시퀀스에 의사 요소를 추가해야 한다고 명시합니다.

제한사항

효과를 적용하려는 경우 위의 접근 방식은 ":hover"와 같은 사용자 작업 의사 클래스에 적합하지 않을 수 있습니다. 의사 요소 자체가 상호 작용할 때만 가능합니다. 이는 현재 표준 CSS 메커니즘을 통해서는 불가능합니다. 이러한 경우 ":hover"를 적용하려면 의사 요소 대신 실제 하위 요소를 사용해야 할 수도 있습니다.

위 내용은 :before 및 :after 의사 요소에 :hover 스타일을 적용하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!