area 的 onmouseover 事件能直接用，但必须配合 href 或 tabindex 才有焦点和可交互性；纯绑定会静默失效，因 area 默认不可聚焦、不触发鼠标事件，除非具备导航语义或显式赋予可聚焦能力。
area 的 onmouseover 事件能直接用吗
能，但必须配合 href 或 tabindex 才有焦点和可交互性。纯 onmouseover 绑在 area 上，在多数浏览器中会静默失效——不是 JS 错误，是 HTML 规范限制：area 默认不可聚焦、不触发鼠标事件，除非它具备导航语义（即带 href）或被显式赋予可聚焦能力。
常见错误现象：写了 onmouseover="showTip('xxx')"，但悬停无反应；开发者工具里能看到元素，鼠标划过也不变手型。
- 必须保留
href属性，哪怕只是href="javascript:void(0)"或href="#"（后者需event.preventDefault()阻止跳转） - 推荐加
tabindex="0"，让键盘用户也能触发改事件（否则仅鼠标有效） -
alt不可为空，否则部分浏览器（如 Safari）会跳过该区域的事件监听
如何让鼠标悬停时显示文字提示
不能靠 CSS :hover 直接作用于 area（它不渲染、无盒模型），得用 JS 动态控制一个可见容器（比如 <p id="tooltip"></p>）的位置和内容。
关键点在于：坐标要基于图片原始尺寸计算，再按当前缩放比映射到页面位置，否则提示框会偏移。
- 监听
area的onmouseover，读取event.target.dataset.tip获取提示文本 - 用
img.getBoundingClientRect()和img.naturalWidth / img.offsetWidth算出缩放比例 - 解析
event.target.coords，按shape类型提取中心点（rect取右下角附近，circle取cx,cy，poly取首顶点） - 把计算后的坐标转为页面绝对位置，设置
tooltip.style.left/top
为什么移动端 onmouseover 基本不工作
因为 iOS 和 Android 浏览器对 onmouseover 支持极弱——它本质是桌面鼠标事件，触摸设备没有“悬停”概念。真机上往往只触发一次，或完全不触发。
替代方案只有两个，且必须二选一：
- 改用
onclick+ 延迟显示（例如点击后 300ms 显示提示，再 2s 自动隐藏） - 放弃
area，改用 SVG 热区（<path></path>支持touchstart和pointerover，且坐标天然响应式）
别指望加 cursor: pointer 或 user-select: none 能修复；这是底层事件机制差异，不是样式问题。
coords 坐标怎么映射到 tooltip 显示位置
不能直接把 coords 当 CSS 像素用。它始终是原始图尺寸下的值，而 tooltip 要贴在当前渲染的图片上，中间差一个缩放比。
示例：原始图 1200×800，area 的 coords="400,300,500,400"（矩形），页面中 img 渲染宽度为 600px，则横向缩放比是 600 / 1200 = 0.5，纵向同理。最终 tooltip 的 left 应为 400 × 0.5 + img.offsetLeft。
- 务必用
img.naturalWidth和img.naturalHeight读原始尺寸，不用offsetWidth/Height（含 padding/border） - 如果图片用了
object-fit: contain，还需额外计算裁剪偏移，此时area方案已严重受限 - poly 区域建议取所有顶点的平均坐标作 tooltip 锚点，避免单点漂移
最易被忽略的是：resize 后没重算缩放比，导致 tooltip 在横竖屏切换后彻底错位——这比热区本身点不准更隐蔽。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
