Webkit 필터 호버가 스태킹 순서를 수정하는 이유와 이를 되돌리는 방법은 무엇입니까?

Webkit 필터를 가리키면 스택 순서가 수정되는 이유

마우스를 올린 이미지에 Webkit 필터를 적용하면 예상치 못한 변화가 나타날 수 있습니다. 스태킹 순서입니다. 이는 필터에 의해 스택 컨텍스트가 생성되기 때문입니다.

Webkit 필터 속성을 없음 이외의 값으로 설정하면 스택 컨텍스트가 설정됩니다. 스택 컨텍스트는 요소가 문서 트리에 포함된 순서 또는 z-index 속성에 따라 스택되는 3차원 공간입니다. 즉, 스태킹 컨텍스트 내의 요소는 항상 컨텍스트 외부 요소 위에 표시됩니다.

귀하의 경우 이미지에 적용된 Webkit 필터가 스태킹 컨텍스트를 생성합니다. 이미지 요소는 이 컨텍스트 내에 배치되는 반면 절대적으로 배치된 DIV "슬라이드 콘텐츠"는 컨텍스트 외부에 있습니다. 이미지 위로 마우스를 가져가면 필터가 적용되어 스택 컨텍스트가 생성되고 이미지가 DIV 위에 스택되어 이미지가 흐려집니다.

효과 반전

절대 위치에 있는 DIV가 숨겨지는 것을 방지하려면 Webkit 필터를 제거하거나 마우스 오버 시 해당 값을 없음으로 설정할 수 있습니다. 업데이트된 CSS는 다음과 같습니다.

<code class="css">li a:hover img {
  -webkit-filter: none; /* or filter: none; to remove the filter altogether */
}</code>

이렇게 하면 마우스 오버 시 필터가 비활성화되어 Z-인덱싱을 사용하지 않고도 DIV가 제대로 표시될 수 있습니다.

위 내용은 Webkit 필터 호버가 스태킹 순서를 수정하는 이유와 이를 되돌리는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!