CSS를 사용하여 하위 호버에서 상위 배경색을 변경하는 방법은 무엇입니까?

CSS를 사용하여 상위 요소를 직접 타겟팅할 수 없습니다

문제: 하위 요소 위로 마우스를 가져갈 때 상위 컨테이너의 배경색을 변경하는 방법 CSS만 사용하는 요소?

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

호환성:

• IE 11 및 Edge
• Chrome
• Firefox

단계:

1. 상위 항목에서 포인터 이벤트 비활성화 div: 이렇게 하면 div가 :hover를 무시합니다. 이벤트.

div {
  pointer-events: none;
}

2. 마우스를 올리면 상위 배경 변경: 상위 항목에 마우스를 올리면 배경 색상이 변경되도록 설정합니다.

div:hover {
  background: #F00;
}

3. 자식에 대한 포인터 이벤트 활성화: 이렇게 하면 호버링이 허용됩니다. 하위 요소를 가리키면 이벤트가 트리거됩니다.

div > a {
  pointer-events: auto;
}

설명:

하위 요소를 가리키면 상위 div도 가리키게 됩니다. 포인터 이벤트 속성 중 하나입니다. 그러나 포인터 이벤트: 없음 설정으로 인해 부모의 hover 의사 클래스가 무시됩니다. 하위 항목에서 포인터 이벤트를 활성화하면 호버 이벤트가 하위 항목에서만 트리거되어 상위 항목의 배경색이 원하는 대로 변경됩니다.

참고: IE 11 및 Edge에서 하위 요소는 포인터 이벤트가 제대로 작동하려면 display: inline-block 또는 display: block이 있어야 합니다.

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