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

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

다양한 시나리오에서 사용자가 상위 요소 위로 마우스를 가져갈 때 하위 요소의 스타일을 변경하는 것이 바람직합니다. . 이는 주로 CSS 솔루션, 특히 :hover 가상 클래스 선택기를 활용하여 달성할 수 있습니다.

예를 들어, 사용자가 패널 위로 마우스를 가져갈 때 패널 내의 옵션 표시줄 색상을 변경하려는 경우 CSS는 다음을 제공합니다. 간단한 접근 방식:

.parent:hover .child {
  /* Style for child element on hover */
}

이 스니펫은 :hover 의사 클래스를 사용하여 스타일 변경 사항이 상위 요소인 경우 하위 요소(.child)에만 적용되어야 함을 지정합니다. (.parent) 위에 마우스를 올려 놓습니다. 하위 조합자(공백)를 사용하면 하위 선택자와 일치하는 상위 요소의 하위 항목을 선택할 수 있습니다.

이 실제 예를 고려하세요.

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

.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;
}

이 코드는 배경을 수정합니다. 색상을 변경하고, 크기를 변환하고, 상위 요소 위에 마우스를 올리면 하위 요소의 삽입 테두리를 조정하여 CSS의 효율성을 보여줍니다. 맥락.

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