CSS 상위 선택기를 사용하지 않고 하위 호버에서 상위 요소의 스타일을 어떻게 지정할 수 있습니까?

CSS 상위 선택자 없이 하위 Hover에서 상위 요소 스타일 지정

CSS에 전용 상위 선택자가 없음에도 불구하고 스타일 지정이 가능합니다. 하위 요소의 호버 상태를 기반으로 하는 상위 요소입니다. 마우스를 가져가면 상위 섹션을 강조 표시하는 "삭제 버튼"의 예를 고려해 보겠습니다.

효과적인 접근 방식 중 하나는 의사 래퍼를 사용하는 것입니다. 상위 항목을 포인터 이벤트: 없음으로 설정하고 포인터 이벤트: 자동으로 하위 div를 생성하면 상위 이벤트와 하위 이벤트를 대상으로 하는 마우스 이벤트를 구별할 수 있습니다.

다음 CSS 스니펫은 이것이 어떻게 가능한지 보여줍니다. 달성:

div.parent {
  pointer-events: none;
}

div.child {
  pointer-events: auto;
}

div.parent:hover {
  background: yellow;
}

이 접근 방식을 사용하면 CSS에 전용 상위 요소가 없더라도 하위 요소의 마우스 오버 상태를 기반으로 상위 요소의 스타일을 지정할 수 있습니다. 선택기.

위 내용은 CSS 상위 선택기를 사용하지 않고 하위 호버에서 상위 요소의 스타일을 어떻게 지정할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!