CSS를 사용하여 하위 호버에서 상위 컨테이너의 배경색을 어떻게 변경할 수 있습니까?

CSS를 사용하여 하위 호버에서 상위 컨테이너 배경색 변경

처음에는 많은 사람들이 CSS에 상위 요소를 타겟팅할 수단이 부족하다고 제안할 수 있지만 문제는 하위 호버에서 상위 컨테이너의 배경색을 변경하는 문제는 영리한 방법으로 해결할 수 있습니다.

CSS 솔루션 포인터 이벤트 및 :hover 사용

원하는 효과를 얻으려면 세 가지 CSS 규칙을 생성하세요.

1. 설정 포인터 이벤트: 호버 이벤트에 응답하지 않도록 상위 div에 없음
2. 배경색 정의 parent-div:hover 선택기에서 상위 항목을 변경합니다.
3. 하위 요소에 포인터 이벤트: 자동을 설정하여 하위 항목을 가리킬 때 호버 이벤트 트리거를 활성화합니다.

이것은 접근 방식은 자식을 가리키면 상위 호버 이벤트가 활성화되는 반면, 부모는 호버 의사 클래스를 무시하여 호버 이벤트가 child.

예

div {
  pointer-events: none;
}
div:hover {
  background: #F00;
}
div > a {
  pointer-events: auto;
}

<div>
  <h1>Heading</h1>
  <a href="#">Anchor Text</a>
</div>

호환성

이 솔루션은 IE 11 및 Edge와 호환됩니다. 크롬, 파이어폭스. 그러나 IE 11 및 Edge에서는 포인터 이벤트가 올바르게 작동하려면 하위 요소에 display: inline-block 또는 display: block이 있어야 합니다.

위 내용은 CSS를 사용하여 하위 호버에서 상위 컨테이너의 배경색을 어떻게 변경할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!