하위 요소 위로 마우스를 가져갈 때 CSS만 사용하여 상위 컨테이너의 배경색을 어떻게 변경할 수 있습니까?

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

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

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

이 효과를 얻으려면 포인터 이벤트와 :hover를 조작할 수 있습니다. 의사 클래스:

1. 포인터 이벤트 설정: 상위 항목에 없음. 이렇게 하면 상위 요소가 호버 이벤트를 수신하지 못하게 됩니다.
2. 정의 마우스를 올리면 원하는 상위 배경색이 변경됩니다.
3. 포인터 이벤트 설정: 자동 이를 통해 부모가 무시하더라도 하위 요소가 hover 이벤트를 트리거할 수 있습니다.

예:

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

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

이 솔루션은 하위 요소의 호버 이벤트를 효과적으로 캡처하여 하위 요소를 가리킬 때 상위 컨테이너의 배경이 변경되도록 허용합니다. 자바스크립트.

위 내용은 하위 요소 위로 마우스를 가져갈 때 CSS만 사용하여 상위 컨테이너의 배경색을 어떻게 변경할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!