상위 요소 위로 마우스를 가져갈 때 숨겨진 요소의 배경색을 변경하려면 어떻게 해야 합니까?

CSS를 사용하여 마우스 오버 시 요소 조작

대화형 요소를 만드는 과정에서 CSS 마우스 오버 효과를 이해하는 데 어려움을 겪었습니다. 특히 특정 요소 위에 마우스를 올리면 추가 정보를 표시하고 싶지만 제공된 코드가 효과적이지 않은 것 같습니다.

이 문제를 해결하려면 CSS에서는 요소에만 마우스 오버 효과를 구현할 수 있다는 점을 기억하세요. 이는 마우스를 가져가는 요소의 직계 자손입니다.

다음 코드를 고려하세요.

#cheetah {
  background-color: red;
  color: yellow;
  text-align: center;
}

a {
  color: blue;
}

#hidden {
  background-color: black;
}

a:hover > #hidden {
  background-color: orange;
  color: orange;
}

이 스니펫에서, 숨겨진 div는 마우스로 가리킨 요소(텍스트 "Cheetah"가 있는 앵커 태그) 내에 직접 중첩됩니다. 이렇게 수정하면 앵커 태그 위로 마우스를 가져가면 숨겨진 div의 속성이 수정됩니다.

이 코드의 라이브 데모는 다음 URL에서 찾을 수 있습니다: http://jsfiddle.net/LgKkU/

위 내용은 상위 요소 위로 마우스를 가져갈 때 숨겨진 요소의 배경색을 변경하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!