상위 요소에 마우스를 올렸을 때 하위 요소의 스타일을 어떻게 지정할 수 있나요?

상위 마우스 오버 시 하위 요소 스타일 지정

상위 요소 위로 마우스를 가져갈 때 하위 요소의 모양을 수정해야 합니까? CSS의 강력한 :hover 선택기를 입력하세요.

이렇게 하려면:

.parent:hover .child {
  /* Styling for the child element when the parent is hovered */
}

이 선택기를 사용하면 상위 요소인 ".parent"를 마우스로 가리키면 하위 요소를 타겟팅하게 됩니다. 하위 조합자(공백)는 ".child."와 일치하는 하위 요소를 선택합니다.

예:

.parent:hover .child {
  background-color: #ccc;
}

이렇게 하면 상위 요소 위로 마우스를 가져가면 하위 요소의 배경이 회색으로 변합니다.

라이브 예:

<div class="parent">
  <p class="child">Hover me</p>
</div>

.parent {
  border: 1px dashed gray;
  padding: 1em;
  display: inline-block;
}

.child {
  background-color: white;
  padding: 0.5em;
  transition: all 0.5s;
}

.parent:hover .child {
  background-color: #ccc;
  transform: scale(1.1);
}

이 예는 하위 요소의 배경을 다음으로 변경합니다. 회색이며 부모 마우스 오버 시 약간 확대됩니다.

브라우저 지원은 여기에서 다룹니다. CSS를 활용하여 사용자 경험을 향상시키세요!

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