CSS를 사용하여 이미지 맵에서 마우스오버 스타일을 어떻게 지정할 수 있나요?

CSS를 사용하여 이미지 맵에서 마우스오버 스타일 지정

이미지 맵은 이미지 내에 클릭 가능한 영역을 만드는 편리한 방법을 제공합니다. 그러나 기본적으로 이러한 영역에는 마우스를 올려 놓았을 때 시각적 피드백이 부족합니다. CSS는 이미지 맵에서 마우스 오버 스타일을 지정하기 위한 제한된 옵션을 제공하지만 다음은 미묘한 상호 작용을 추가하는 솔루션입니다.

접근 방식:

Divs 또는 Anchor에서 :hover 사용 태그

• 클릭 가능한 태그 바로 위에 투명한 div 또는 앵커 태그를 만듭니다.
• 처음에는 이러한 요소의 불투명도를 0으로 설정합니다.
• 이러한 요소의 :hover 상태에 스타일을 추가하여 불투명도를 변경하고 눈에 보이는 호버를 만듭니다. effect.

예:

<a>

.area {
  background: #fff;
  display: block;
  height: 475px;
  opacity: 0;
  position: absolute;
  width: 320px;
}
#area2 {
  left: 320px;
}
#area1:hover, #area2:hover {
  opacity: 0.2;
}

이 예에서 .area 클래스는 투명한 div 또는 앵커 태그에 대한 스타일을 정의합니다. :hover 규칙은 클릭 가능한 영역 위로 마우스를 가져갈 때 불투명도를 0.2로 변경하여 미묘한 강조 효과를 제공합니다.

참고: 이 접근 방식은 제한 사항으로 인해 모든 브라우저에서 작동하도록 보장되지 않습니다. 이미지 맵 스타일링의 CSS. 그러나 이미지 맵 영역에 기본 호버 효과를 추가하는 비교적 간단한 솔루션을 제공합니다.

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