상위 선택기를 사용하지 않고 하위 마우스 오버 시 상위 요소의 스타일을 어떻게 지정할 수 있나요?

상위 선택자 없이 하위 마우스 오버 시 상위 요소 스타일 지정

CSS에는 전용 상위 선택자가 없지만 하위 항목이 있을 때 상위 요소의 스타일을 지정할 수 있습니다. 요소가 마우스로 이동됩니다. 이 시나리오에서는 컨테이너 요소에 포함된 삭제 버튼을 마우스로 가리킬 때 컨테이너 요소를 강조 표시하는 것을 목표로 합니다.

HTML 마크업을 고려하세요.

<div>
    <p>Lorem ipsum ...</p>
    <button>Delete</button>
</div>

부모 없이 선택기를 사용하면 의사 래퍼 개념을 활용하여 원하는 효과를 얻을 수 있습니다. 포인터 이벤트 설정: 없음; 상위 요소 및 포인터 이벤트: auto; 하위 요소(의사 래퍼)에서 트리거 메커니즘을 생성할 수 있습니다.

이를 구현하는 CSS 코드는 다음과 같습니다.

div.parent {  
    pointer-events: none;
}

div.child {
    pointer-events: auto;
}

div.parent:hover {
    background: yellow;
}

참고: 하위 요소가 자체적으로 이벤트 리스너에는 클릭 기능을 유지하기 위해 포인터 이벤트가 자동으로 설정되어 있습니다.

위 내용은 상위 선택기를 사용하지 않고 하위 마우스 오버 시 상위 요소의 스타일을 어떻게 지정할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!