如何使用 CSS 在图像地图上实现鼠标悬停效果？-css教程-PHP中文网

如何使用 CSS 在图像地图上实现鼠标悬停效果？

Patricia Arquette

发布： 2024-11-08 03:06:01

原创

201 人浏览过

How Can You Achieve Mouseover Effects on Image Maps Using 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 的简单解决方法：

<div class="area">

登录后复制

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

登录后复制

在这种方法中，透明块被放置在图像上，每个块代表一个可点击区域。通过将不透明度默认设置为 0 并在悬停时将其增加到 0.2，可以实现微妙的鼠标悬停效果。

以上是如何使用 CSS 在图像地图上实现鼠标悬停效果？的详细内容。更多信息请关注PHP中文网其他相关文章！