area标签不支持cursor样式，需通过JS动态判断鼠标位置并切换img元素的cursor类；coords计算比elementFromPoint更可靠；移动端和无障碍应改用语义化按钮替代area。
area 标签本身不支持 cursor 样式
直接给 <area> 元素写 style="cursor: pointer;" 或加 CSS 类是无效的——<area> 是不可渲染元素，没有盒模型，浏览器根本不处理它的 cursor 属性。你看到的光标变化，其实是它关联的 <img> 或其容器的样式在起作用。
真正生效的是 img + map 容器的 cursor 控制
要让不同热点区域显示不同光标，必须把 cursor 应用到包裹 <map> 的图像或其父容器上，并靠 JS 动态切换：
- 给
<img usemap="#mymap">设置初始cursor: default; - 监听
mousemove事件，用document.elementFromPoint(x, y)或预计算 coords 范围判断鼠标是否落在某个<area>区域内 - 匹配成功后，给
<img>添加对应 class，例如.area-help { cursor: help; } - 务必在
mouseout或移出所有区域时重置回默认值，否则光标会卡住
coords 判断比 elementFromPoint 更可靠
elementFromPoint 在高 DPI、缩放、iframe 嵌套等场景下容易偏移；直接解析 <area coords> 更可控：
-
rect类型：检查x >= x1 && x <= x2 && y >= y1 && y <= y2 -
circle类型：用距离公式(x - cx)² + (y - cy)² <= r² -
poly类型：用射线法或isPointInPath（需先用CanvasRenderingContext2D构建路径） - 注意：
coords值是相对于原始图片尺寸的，若<img>被 CSS 缩放，需按比例换算当前坐标
移动端和可访问性必须绕开 area 光标依赖
几乎所有移动端浏览器忽略 <area> 的 hover 行为，且 screen reader 不会把 <area> 当作交互目标暴露给辅助技术。更务实的做法是：
立即学习“前端免费学习笔记（深入）”；
- 用语义化
<button>或带role="button"的<div>叠在图像对应位置（配合position: absolute和pointer-events: none原图） - 每个按钮独立设置
cursor，并绑定aria-label和焦点管理 - 放弃“一个图片多个光标”的幻想，优先保证点击可达性与键盘导航
真正难的不是算 coords，而是说服设计稿接受「图像热点」必须退化为「带定位的语义按钮」——否则光标再准，也挡不住用户根本点不到。
