如何在悬停时设置 HTML 区域标签的样式？

将鼠标悬停在 HTML 区域标记上

要将鼠标悬停在 HTML 区域标记上，可以使用 :hover 伪类。此伪类允许您指定当用户将鼠标悬停在元素上时将应用的样式。

以下示例说明如何使用 :hover 伪类更改区域的边框颜色当用户将鼠标悬停在其上时标记：

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

当用户将鼠标悬停在任何区域标记上时，此 CSS 会将任何区域标记的边框颜色更改为黑色

附加信息

• 区域标签用于定义图像上的可点击区域。
• :hover 伪- class 用于指定当用户将鼠标悬停在元素上时将应用的样式。
• 使用 border 属性指定元素边框的宽度、样式和颜色。

示例

以下代码显示了如何使用区域标签和:hover 伪类，用于在用户将鼠标悬停时创建带有黑色边框的可点击图像it:

<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>

在此示例中，区域标签定义了 ID 为 my-image 的图像上的可点击区域。当用户将鼠标悬停在图像上时，:hover 伪类会将区域的边框颜色更改为黑色。

以上是如何在悬停时设置 HTML 区域标签的样式？的详细内容。更多信息请关注PHP中文网其他相关文章！