CSS 可以用来设置图像地图上鼠标悬停效果的样式吗？

CSS 可用于设置图像地图上的鼠标悬停效果样式吗？

可以使用包含链接的图像创建网页图像地图。然而，通过在鼠标悬停时设置区域形状的样式来添加交互性可以增强用户体验。使用 CSS 可以实现这一点吗？

让我们考虑以下代码：

<img src="{main_photo}" alt="locations map" usemap="#location-map" />
<map name="location-map">
    <area shape="rect" coords="208,230,290,245" href="{site_url}locations/grand_bay_al" />
    <area shape="rect" coords="307,214,364,226" href="{site_url}locations/mobile_al" />
    <area shape="rect" coords="317,276,375,290" href="{site_url}locations/loxley_al" />
</map>

area { border: 1px solid #d5d5d5; }

尽管尝试过，此代码仍无法在鼠标悬停时设置区域形状的样式。

纯 CSS 解决方案：

除了使用图像映射方法之外，还可以使用使用 CSS 的 :hover 伪类的替代方法。举例如下：

<div class="area"></div>
<div class="area"></div>
<img src="image.jpg" />

.area {
    background: #fff;
    display: block;
    height: [desired height];
    opacity: 0;
    position: absolute;
    width: [desired width];
}
.area:hover {
    opacity: 0.2;
}

说明：

• 图片放置在底层。
• 两个div元素绝对位于图像顶部，不透明度为 0。
• 当鼠标悬停在这些 div 元素上时，不透明度增加到 0.2，显示它们后面的内容。

此方法提供了一种简单而优雅的方法，可以使用 CSS 将鼠标悬停效果添加到图像的特定区域。

以上是CSS 可以用来设置图像地图上鼠标悬停效果的样式吗？的详细内容。更多信息请关注PHP中文网其他相关文章！