상위 선택기를 사용하지 않고 하위 항목을 가리킬 때 상위 요소의 스타일을 어떻게 지정할 수 있나요?

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

CSS에서는 하위 상호 작용을 기반으로 상위 요소를 직접 타겟팅하는 것이 어렵습니다. 부모 선택자가 부족합니다. 하지만 이 효과를 얻을 수 있는 영리한 해결 방법이 있습니다. 즉, 상위 요소 내에 의사 래퍼를 생성하는 것입니다.

삭제 버튼이 마우스를 가져가면 상위 섹션을 강조 표시하는 주어진 예를 고려해 보세요.

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

상위 섹션을 강조 표시하기 위해 포인터 이벤트가 자동으로 설정된 하위 div를 생성하고 parent:

div.parent {
    pointer-events: none;
}

div.child {
    pointer-events: auto;
}

이제 상위는 마우스 이벤트에 투명해지며 하위 div가 호버 효과를 트리거할 수 있습니다. 그리고 하위 항목에서 호버 이벤트가 발생하면 원하는 대로 상위 요소의 스타일을 지정할 수 있습니다.

div.parent:hover {
    background: yellow;
}

이 기술을 사용하면 상위 요소가 하위 항목에 대한 호버 상호 작용에 응답하여 상위 선택기의 동작을 효과적으로 시뮬레이션할 수 있습니다. 해당 기능을 유지하려면 이벤트 리스너가 있는 다른 하위 요소에 대해 포인터 이벤트: 자동을 복원해야 합니다.

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