area标签不支持onmousemove事件，因其无渲染且纯语义；可行方案为：①img+usemap配合JS坐标判断；②CSS绝对定位热点层模拟。
area 标签不支持 onmousemove 事件，必须用 <map></map> 配合 <img alt="HTML区域映射鼠标移动效果如何添加" > 或 CSS 容器模拟
直接给 <area> 绑定 onmousemove 是无效的——它是个无渲染、纯语义的标签，浏览器根本不触发其鼠标事件。真实可行的路径只有两条：一是用 <img usemap alt="HTML区域映射鼠标移动效果如何添加" > + JS 监听图片容器的坐标并手动判断落在哪个 <area> 区域；二是放弃 <map></map>，改用绝对定位的 <div> 或 <code><span></span> 模拟热点区域，自己维护坐标逻辑。
用 getBoundingClientRect() + coords 手动计算鼠标是否进入 <area>
如果你必须保留传统 <map></map> 结构（比如 SEO 或旧系统兼容），就得自己解析 <area coords> 并做几何判断。注意：coords 值格式依赖 shape 属性：
-
rect：四个值，"x1,y1,x2,y2"，判断mouseX > x1 && mouseX y1 && mouseY -
circle：三个值，"cx,cy,r"，用距离公式Math.hypot(mouseX - cx, mouseY - cy) -
poly：偶数个值，每对为一个顶点，需用射线法或叉积判断点是否在多边形内（别手写，用point-in-polygon这类轻量库）
别忘了把鼠标坐标从 viewport 转换到图片坐标系：const rect = img.getBoundingClientRect(); const x = e.clientX - rect.left;
更推荐：用 CSS position: absolute 热点层替代 <area>
现代项目里，90% 的“图像热点”需求其实更适合用带 data-id 的覆盖层实现，可控性高、调试直观、支持过渡动画：
立即学习“前端免费学习笔记（深入）”；
<div class="image-container"> <img src="map.png" alt="region map"> <div class="hotspot" style="left: 20%; top: 30%; width: 10%; height: 8%;" data-region="north"></div> <div class="hotspot" style="left: 65%; top: 45%; width: 12%; height: 10%;" data-region="south"></div> </div>
然后监听容器的 mousemove，用 e.target.matches(".hotspot") 或 document.elementFromPoint() 快速定位。这样不用解析坐标字符串，也不受 <map></map> 的 shape 限制，缩放时也能用 transform: scale() 统一处理。
移动端和缩放场景下，<area> 坐标会失效
这是最容易被忽略的一点：<area coords> 是像素绝对值，一旦图片被 CSS 缩放、响应式调整宽高比，或用户放大页面，所有坐标就全偏了。而用百分比定位的 CSS 热点层天然适配缩放。如果必须用原生 <map></map>，就得监听 window.resize 和 img.onload，重新计算缩放系数并动态重写 coords —— 实践中几乎没人这么干，太脆弱。
