상위 요소를 마우스로 가리킬 때 하위 요소의 스타일을 어떻게 지정할 수 있습니까?

상위 요소를 가리킬 때 하위 요소 스타일 조정

CSS를 사용하여 상위 요소를 가리킬 때 하위 요소의 스타일을 변경할 수 있습니다. 이를 달성하려면 :hover 의사 클래스를 사용하세요.

.parent:hover .child {
  /* Styles applied here will affect child elements when the parent is hovered */
}

이 규칙은 현재 마우스오버된 상위 요소 내의 모든 하위 요소를 선택합니다. 중괄호 안에 적용된 스타일은 상위 요소를 가리킬 때만 하위 요소에 적용됩니다.

예를 들어, 상위 메뉴 항목이 있을 때 드롭다운 메뉴의 색상을 변경해야 하는 경우 마우스를 올리면 다음 CSS를 사용할 수 있습니다.

.menu-item:hover .drop-down-menu {
  background-color: #ccc;
}

해당 메뉴 항목을 마우스로 가리키면 드롭다운 메뉴의 배경색이 연한 회색으로 변경되어 시각적인 단서를 제공합니다. 사용자입니다.

위 내용은 상위 요소를 마우스로 가리킬 때 하위 요소의 스타일을 어떻게 지정할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!