하위 요소 위로 마우스를 가져갈 때 상위 요소의 호버 효과가 트리거되는 것을 방지하는 방법은 무엇입니까?

상위 및 하위 요소에 대한 호버 효과

중첩된 하위 요소 위로 커서를 이동할 때 상위 요소의 호버 효과를 비활성화하는 문제를 해결하려면 요소의 경우 다음 솔루션을 고려해 보겠습니다.

CSS :has 선택기(2024년 도입)

CSS :has 선택기의 도입으로 요소의 스타일을 직접 지정할 수 있습니다. 하위 요소의 호버 상태를 기반으로 하는 상위 요소입니다. 예:

.parent:has(.child:hover) {
    background: normal;
}

이 코드는 "child" 클래스가 있는 하위 요소 위에 커서를 놓으면 "parent" 클래스가 있는 상위 요소의 배경색이 원래 상태로 돌아가도록 합니다.

형제 요소 트릭

:has 선택기 이전에는 형제 요소를 사용하는 것이 해결 방법이었습니다.

<div class="parent">
    <div class="sibling"></div>
    <div class="child"></div>
</div>

형제 요소는 다음과 같습니다. 절대 위치 지정을 사용하여 하위 요소와 겹치도록 위치를 지정합니다. 하위 요소 위로 마우스를 가져가면 형제 요소의 호버 효과가 활성화되어 상위 요소의 호버 효과를 재정의합니다.

.child:hover ~ .sibling {
    background: #FFF; // Override parent's background color
}

제한 사항

이 솔루션은 중첩된 요소의 구조에 따라 작동하지 않을 수도 있습니다.

위 내용은 하위 요소 위로 마우스를 가져갈 때 상위 요소의 호버 효과가 트리거되는 것을 방지하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!