您可以使用纯 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 解决方案

使用图像映射时，您可以将 :hover 样式应用于位于图像顶部的元素。这简化了流程，不再需要 jQuery：

• 将图像放在底部。
• 添加两个锚点块 (<a>)，绝对定位和不透明度设置为0.
• 悬停时，将不透明度设置为 0.2。

代码示例

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

<a>

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