마우스 오버 시 HTML 영역 태그의 스타일을 어떻게 지정합니까?

HTML 영역 태그 위로 마우스를 가져가기

HTML 영역 태그 위로 마우스를 가져가려면 :hover 의사 클래스를 사용할 수 있습니다. 이 의사 클래스를 사용하면 사용자가 요소 위로 마우스를 가져갈 때 적용할 스타일을 지정할 수 있습니다.

다음은 :hover 의사 클래스를 사용하여 영역의 테두리 색상을 변경하는 방법에 대한 예입니다. 사용자가 태그 위로 마우스를 가져가면 태그:

area:hover {
  border: 1px solid black;
}

이 CSS는 사용자가 위로 마우스를 가져가면 모든 영역 태그의 테두리 색상을 검은색으로 변경합니다.

추가 정보

• area 태그는 이미지에서 클릭 가능한 영역을 정의하는 데 사용됩니다.
• :hover 의사- 클래스는 사용자가 요소 위로 마우스를 가져갈 때 적용할 스타일을 지정하는 데 사용됩니다.
• 테두리 속성은 다음과 같은 용도로 사용됩니다. 요소 테두리의 너비, 스타일 및 색상을 지정합니다.

예

다음 코드는 영역 태그와 :hover 의사 클래스는 사용자가 마우스를 가져갈 때 검은색 테두리가 있는 클릭 가능한 이미지를 생성합니다.

<img  src="/static/imghwm/default1.png" data-src="my-image.jpg" class="lazy" usemap="#my-image-map" alt="마우스 오버 시 HTML 영역 태그의 스타일을 어떻게 지정합니까?" >

<map name="my-image-map">
  <area shape="rect" coords="0, 0, 100, 100" href="my-link.html" alt="My Link">
</map>

<style>
  area:hover {
    border: 1px solid black;
  }
</style>

In 이 예에서 지역 태그는 ID가 my-image인 이미지에서 클릭 가능한 영역을 정의합니다. 사용자가 이미지 위로 마우스를 가져가면 :hover 의사 클래스가 해당 영역의 테두리 색상을 검은색으로 변경합니다.

위 내용은 마우스 오버 시 HTML 영역 태그의 스타일을 어떻게 지정합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!