:hover 및 인접 형제 선택기 Webkit 버그를 해결하는 방법은 무엇입니까?

:hover 및 Adjacent-Sibling 선택기를 사용하여 Webkit 버그 이해 및 해결

Webkit 브라우저(예: Chrome, Safari)에서 버그 여러 인접 형제 선택기와 함께 :hover 의사 클래스를 사용할 때 발생합니다. 특히 세 번째 인접 형제가 도입되면 호버 효과가 예상대로 적용되지 않습니다.

예:

a:hover + div {}

이 코드는 완벽하게 작동합니다. 그러나 또 다른 인접 형제 선택기를 추가하면

div:hover + a + div {}

Webkit 브라우저에서 의도한 동작이 중단됩니다.

흥미롭게도 먼저 앵커 요소 위에 마우스를 놓은 다음 div 요소 위로 마우스를 가져가면 스타일이 올바르게 적용됩니다. 또한 인접한 ~ 형제 선택기를 포함하면 스타일이 선언되지 않은 경우에도 문제가 해결됩니다.

div:hover ~ div {}

이 버그를 해결하려면 본문 요소에서 애니메이션을 시뮬레이션하여 해결 방법을 구현할 수 있습니다.

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

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

바디에 빈 애니메이션을 실행하면 버그를 효과적으로 우회할 수 있습니다. 이 JSFiddle에서 솔루션을 확인할 수 있습니다: http://jsfiddle.net/jalbertbowdenii/ds2yY/1/

위 내용은 :hover 및 인접 형제 선택기 Webkit 버그를 해결하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!