하위 호버에서 상위 컨테이너의 배경색 변경(CSS만 해당)

CSS를 사용하여 상위 요소를 선택하는 것에 대한 질문은 종종 다음과 같이 표시됩니다. 중복되어 실용적인 솔루션의 필요성을 간과합니다. 특히, 자식 위로 마우스를 가져갈 때 부모 컨테이너의 배경색을 변경하는 문제는 CSS 전용 접근 방식을 통해 해결할 수 있습니다.

포인터 이벤트 및 마우스 오버:

이 효과를 얻기 위해 포인터 이벤트와 :hover 의사 클래스를 조작할 수 있습니다:

1. 포인터 이벤트 설정: 없음 켜기 상위. 이렇게 하면 상위 요소가 호버 이벤트를 수신하지 못하게 됩니다.
2. 호버 시 원하는 상위 배경색 변경을 정의합니다.
3. 포인터 설정 -events: auto on the child. 이렇게 하면 부모가 무시하더라도 하위 요소가 호버 이벤트를 트리거할 수 있습니다.

예:

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

  Anchor Text

이 솔루션은 하위 요소에 대한 hover 이벤트를 효과적으로 캡처하여 JavaScript를 사용하지 않고도 하위 요소를 가리키면 상위 컨테이너의 배경이 변경되도록 합니다.