WebKit이 여러 인접 형제 요소에 hover 스타일을 적용하지 못하는 이유는 무엇입니까?

WebKit 문제: 여러 인접 형제 선택기가 있는 Hover 의사 클래스

웹 브라우저는 일반적으로 다음에서 :hover 의사 클래스를 처리하는 데 문제가 발생합니다. 인접 형제 선택자와 결합합니다. 특히 WebKit(Safari 및 Chrome)은 일련의 인접한 형제 요소에 :hover 스타일을 적용할 때 어려움에 직면합니다.

도전 과제:

다음 예에서는 문제를 보여줍니다. :

div:hover + a + div { /* styles here */ }

이 경우 WebKit은 마우스를 두 번째 div 위로 직접 가져갈 때 두 번째 div에 스타일을 적용하지 못합니다. 그러나 먼저 이전 앵커 요소 위로 마우스를 이동한 다음 두 번째 div 위로 마우스를 이동하면 스타일이 예상대로 적용됩니다.

해결책:

다음에 대한 해결 방법 이 버그는 본문 요소의 가짜 애니메이션과 관련이 있습니다.

body { -webkit-animation: bugfix infinite 1s; }

@-webkit-keyframes bugfix {
  from { padding: 0; }
  to { padding: 0; }
}

이 솔루션은 WebKit이 본문 요소를 다시 렌더링하도록 하는 간단한 애니메이션을 도입하여 호버 의사 클래스 및 여러 인접 형제 관련 문제를 해결합니다. 선택자.

위 내용은 WebKit이 여러 인접 형제 요소에 hover 스타일을 적용하지 못하는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!