CSS를 사용하여 요소 호버에 대한 추가 정보를 표시하는 방법은 무엇입니까?

마우스를 올리면 요소를 강조 표시하고 추가 정보를 표시하는 방법

드롭다운을 표시하려는 문제가 발생했습니다. -특정 요소 위로 마우스를 가져가면 영역과 유사하지만 제공한 방법이 예상대로 작동하지 않습니다. 이 문제에 대한 해결책을 살펴보겠습니다.

한 가지 접근 방식은 CSS를 사용하는 것입니다. 하지만 숨겨진 div가 마우스를 올려 놓은 요소의 직계 하위인 경우에만 가능합니다. 방법은 다음과 같습니다.

#cheetah {
  position: relative;
}

#hidden {
  position: absolute;
  display: none;
  background-color: black;
}

#cheetah:hover #hidden {
  display: block;
  background-color: orange;
}

이 코드에서는 "#cheetah" div의 위치를 ​​"relative"로 설정하여 하위 요소를 상대적으로 배치할 수 있습니다. 그런 다음 "#hidden" div의 위치를 ​​"absolute"로 설정하고 초기 표시 스타일을 "none"으로 설정합니다. "#cheetah" 위로 마우스를 가져가면 "hover" 선택기를 사용하여 "#hidden"의 표시 스타일을 "block"으로 변경하고 배경색을 주황색으로 업데이트합니다.

이 방법은 오직 작동한다는 점을 기억하세요. "#hidden" div가 마우스를 올려 놓은 요소의 직계 하위 요소인 경우. 이 경우 CSS만 사용하여 원하는 기능을 얻을 수 있습니다. 그렇지 않으면 원하는 효과를 얻기 위해 JavaScript 사용과 같은 다른 접근 방식을 고려해야 할 수도 있습니다.

위 내용은 CSS를 사용하여 요소 호버에 대한 추가 정보를 표시하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!