无法为image map图片映射的area元素实现hover悬停效果如何解决

问题根源 #

是仅用于定义图片映射可点击区域的逻辑标签，浏览器不会对其进行可视化渲染，因此你直接为 设置的背景、透明度、滤镜等样式都不会生效，和z-index属性无关。

可行解决方案 #

方案1：替换为SVG实现（最推荐） #

将原有图片的热点区域转换为SVG的<path>/<rect>等图形元素，直接为图形元素设置悬停样式即可，可控性最高。
示例结构参考：

<svg viewBox="0 0 你的图片宽度 你的图片高度" xmlns="http://www.w3.org/2000/svg">
  <!-- 底层引入原图片 -->
  <image href={imagesource} width="100%" height="100%" />
  <!-- 对应各个区域的path，坐标和你原有的area coords一致 -->
  <path id="area1" d="M2087,1394 L1974,1821 L1379,1890 L1312,1760 L1396,1540 L1311,1445 L1334,1383 L1328,1355 L1592,1349 Z" />
  <!-- 其余区域同理 -->
</svg>

对应CSS直接写路径的悬停样式即可：

path:hover {
  fill: rgba(0,0,0,0.5);
  cursor: pointer;
}

方案2：叠加Canvas绘制悬停遮罩 #

不改动现有img+map结构的前提下，在图片上层叠加一个绝对定位的canvas元素，监听area的mouseenter/mouseleave事件，根据当前触发的area坐标在canvas上绘制对应形状的半透明遮罩：

• 监听所有area元素的鼠标事件
• 触发悬停时获取对应area的coords和shape属性，调用canvas的绘图API绘制对应半透明形状
• 鼠标移出时清空canvas画布即可

原有代码的冗余错误修正 #

• img标签是自闭合标签，不需要写</img>结束标签
• 为area设置display: block、z-index等样式无实际作用，可直接删除

内容的提问来源于stack exchange，提问作者HorribleProgrammer