하위 요소에 마우스를 올렸을 때 상위 요소의 스타일을 어떻게 지정할 수 있나요?

하위 요소 호버를 사용하여 상위 요소 스타일 지정

다음과 같은 특정 작업이 수행될 때 상위 요소에 스타일을 적용하는 것은 일반적인 요구 사항입니다. 호버링은 하위 요소에서 발생합니다. 그러나 CSS는 기본 상위 선택자를 제공하지 않습니다. 그럼에도 불구하고 이러한 선택기 없이 이 기능을 달성할 수 있는 창의적인 방법이 있습니다.

의사 요소 활용

한 가지 접근 방식은 의사 요소를 사용하여 상위 요소 주위에 래퍼를 만드는 것입니다. 요소. 이 래퍼 의사 요소에는 포인터 이벤트 속성이 자동으로 설정되어 마우스 이벤트가 이를 통과할 수 있습니다. 반면에 상위 요소는 포인터 이벤트 속성을 없음으로 설정할 수 있습니다. 이렇게 하면 하위 요소 위로 마우스를 가져가면 상위 요소 대신 래퍼 의사 요소에서 마우스 이벤트가 트리거됩니다. 래퍼 의사 요소에 호버 스타일을 적용하면 하위 요소 위에 마우스를 올렸을 때 해당 스타일을 상위 요소에 효과적으로 적용할 수 있습니다.

예제 코드:

div.parent {
    pointer-events: none;
}

div.child {
    pointer-events: auto;
}

div.parent:hover {
    background: yellow;
}

<div class="parent">
    parent - you can hover over here and it won't trigger
    <div class="child">hover over the child instead!</div>
</div>

추가 참고:

• pointer-events 속성은 모든 브라우저에서 지원되지 않으므로 호환성을 위해 브라우저 접두사(예: -webkit-pointer-events)를 사용해야 합니다.
• 이 기술은 요소 가시성 변경 또는 트리거와 같은 하위 요소 상호 작용을 기반으로 상위 요소의 스타일을 지정해야 하는 모든 시나리오에 적용할 수 있습니다. 애니메이션.

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