:hover 및 여러 인접 형제 선택기가 Safari 및 Chrome에서 버그를 일으키는 이유는 무엇입니까?

:hover 및 여러 인접 형제 선택기가 포함된 Safari 및 Chrome 버그

웹 개발에서 :hover 의사 클래스 및 인접 사용 -형제 선택기는 일반적으로 Safari, Chrome, Opera 및 Firefox와 같은 주요 브라우저에서 지원됩니다. 예를 들어 다음 코드는 의도한 대로 작동합니다.

a:hover + div {}

그러나 여러 인접 형제 선택기가 추가되면 Webkit 브라우저(Safari 및 Chrome 포함)에서 예기치 않은 동작이 나타납니다.

div:hover + a + div {}

이런 경우 Webkit은 예상대로 스타일을 적용하지 못합니다.

이 버그를 해결하는 해결 방법은 body 요소에 스타일 선언을 사용하여 미묘한 애니메이션 효과를 만드는 것입니다.

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

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

이 애니메이션은 눈에 보이는 효과는 없지만 스타일 재계산을 트리거하여 Webkit 브라우저가 :hover 및 인접 형제 선택기 스타일을 올바르게 적용할 수 있도록 합니다.

해결 방법을 보여주는 예는 다음과 같습니다. http://jsfiddle. net/jalbertbowdenii/ds2yY/1/.

이 기술을 사용하면 Webkit 버그를 극복하고 다양한 브라우저에서 일관된 동작을 보장할 수 있습니다.

위 내용은 :hover 및 여러 인접 형제 선택기가 Safari 및 Chrome에서 버그를 일으키는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!