CSS를 사용하여 부모 요소 위로 마우스를 가져갈 때 하위 요소의 스타일을 어떻게 지정할 수 있습니까?

상위 마우스 오버 시 하위 요소 타겟팅

질문:

상위 요소 위에 마우스를 올리면 CSS를 사용하는 것이 좋습니다. :hover 선택기로 이를 달성할 수 있습니까?

답변:

예, CSS는 이 요구 사항에 대한 간단한 솔루션을 제공합니다. :hover 의사 클래스와 하위 결합자를 활용하면 마우스를 올려 놓은 상위 요소 내의 하위 요소를 구체적으로 대상으로 지정할 수 있습니다.

.parent:hover .child {
   /* ... */
}

이 규칙에서는 커서가 마우스를 가리키고 있을 때 :hover 의사 클래스가 .parent 요소에 적용됩니다. 그 위에. 그러면 자손 결합자(공백)는 .child 클래스와 일치하는 자손 요소를 선택합니다. 이를 통해 상위 요소를 가리키면 하위 요소의 스타일을 수정할 수 있습니다.

게다가 최신 브라우저는 색상, 글꼴, 배경 및 전환. 다음은 개념을 설명하는 예입니다.

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

.child {
  border: 1px solid brown;
  margin: 1em;
  padding: 0.5em;
  transition: all 0.5s;
}

.parent:hover .child {
  background: #cef;
  transform: scale(1.5) rotate(3deg);
  border: 5px inset brown;
}

<div class="parent">
  parent
  <div class="child">
    child
  </div>
</div>

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