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

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

하위 요소를 호버할 때 상위 요소의 배경색을 변경하는 방법에 대한 질문 일반적입니다. 일반적으로 이러한 유형의 질문은 CSS가 상위 선택자를 지원하는지 여부에 대한 문의와 중복된 것으로 간주됩니다.

CSS가 직접 상위 선택자를 제공하지 않는 것은 사실이지만 이러한 특정 문제를 해결할 수 있는 CSS 솔루션이 있습니다.

포인터 이벤트 및 :hover 사용

이 기술에는 세 가지가 포함됩니다. 단계:

1. pointer-events: none 속성을 상위 요소에 적용합니다. 이렇게 하면 상위 요소가 호버 이벤트를 무시하게 됩니다.
2. 호버 시 상위 요소의 배경색 변경을 정의합니다. parent:hover { background: #F00; }
3. 하위 요소에 포인터 이벤트: 자동을 설정합니다. 이렇게 하면 자식만 호버 이벤트를 트리거하여 부모에게 간접적으로 영향을 미치게 됩니다.

작동 방식:

• 하위가 호버링되면 이벤트 버블링으로 인해 부모도 마우스오버됩니다.
• 그러나 부모의 포인터 이벤트는 다음과 같습니다. none 속성은 자체 hover 의사 클래스에 응답하지 못하게 합니다.
• 하위 항목에 포인터 이벤트: auto가 있으므로 효과적으로 이벤트 버블링을 활성화하고 상위 항목의 hover를 트리거합니다.

예:

div {
  height: 200px;
  width: 200px;
  text-align: center;
  pointer-events: none;
}
div:hover {
  background: #F00;
}
div > a {
  pointer-events: auto;
  display: inline-block;
}

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

이 솔루션은 호환됩니다. IE 11, Edge, Chrome 및 Firefox를 포함한 브라우저를 사용합니다. IE 11 및 Edge의 경우 포인터 이벤트를 활성화하려면 하위 요소에 display: inline-block 또는 display: block이 있어야 합니다.

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