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

하위 항목을 가리키면 상위 컨테이너의 배경색 변경(CSS만 해당)

일반적으로 CSS를 사용하여 상위 요소를 직접 타겟팅하는 것은 불가능합니다. , 특정 시나리오에 대한 해결 방법이 있습니다. 그러한 시나리오 중 하나는 하위 요소 위로 마우스를 가져갈 때 상위 컨테이너의 배경색을 변경하는 것입니다.

해결책: 포인터 이벤트 및 :hover

이 방법은 포인터 이벤트를 활용하고 :hover 의사 클래스:

1. 포인터 이벤트: 없음 parent: 이렇게 하면 상위 요소가 호버 이벤트를 무시하고 비대화형이 됩니다.
2. :hover on parent: 호버할 때 상위 요소에서 원하는 배경색 변경을 정의합니다.
3. pointer-events: auto on child: 하위 요소에 대해서만 호버 이벤트를 다시 활성화하여 허용합니다.

호환성:

• IE 11 및 Edge, Chrome, Firefox에서 작동합니다.
• 참고: IE 11 및 Edge에서는 하위 요소에 디스플레이가 필요합니다. 포인터 이벤트가 작동하려면 inline-block 또는 display: block

예:

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 id="Heading">Heading</h1>
  <a href="#">Anchor Text</a>
</div>

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