area标签不支持onmouseover事件，应通过img的mousemove事件结合coords坐标手动判断鼠标是否在区域内，或用绝对定位透明层模拟悬停效果。
area 标签本身不支持 onmouseover 事件响应
直接给 <area> 写 onmouseover 或绑定 JS 事件监听器，在大多数浏览器中**不会触发**——这是常被忽略的兼容性事实。<area> 是 <map></map> 的子元素，语义上仅用于定义热点区域，W3C 规范未要求其实现交互事件冒泡或直接响应。实际测试中，Chrome、Firefox 均忽略 onmouseover，只有部分旧版 IE 曾有非标准支持。
正确做法：用 CSS + JavaScript 模拟区域悬停效果
核心思路是放弃依赖 <area> 自身事件，改用 <img> 的 onmousemove 获取坐标，结合各 <area> 的 shape 和 coords 手动判断鼠标是否落在该区域内。
- 先用
getBoundingClientRect()获取图片在视口中的真实位置，减去鼠标clientX/Y得到相对坐标 - 对每个
<area>，根据其shape（"rect"/"circle"/"poly"）写对应判断逻辑 -
"rect"最简单：检查x > left && x top && y -
"circle"需计算距离：(x-cx)² + (y-cy)² -
"poly"推荐用射线法（Ray Casting），可复用成熟函数如isPointInPolygon()
示例片段（简化 rect 判断）：
const img = document.getElementById('main-img');
const areas = document.querySelectorAll('map area');
<p>img.addEventListener('mousemove', (e) => {
const rect = img.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;</p><p>areas.forEach(area => {
if (area.shape === 'rect') {
const [l, t, r, b] = area.coords.split(',').map(Number);
if (x > l && x t && y </p><h3>更轻量且兼容的替代方案：用绝对定位的透明层覆盖</h3><p>如果区域形状不复杂（尤其是矩形），比手动坐标计算更稳：为每个 <code><area></code> 对应位置，用 <code><div> 覆盖一层透明 <code>position: absolute</code> 元素，并监听它的 <code>mouseenter</code>/<code>mouseleave</code>。<ul>
<li>需确保父容器 <code>position: relative</code>，且 <code><img></code> 和覆盖层同级</li>
<li>覆盖层 <code>z-index</code> 设为 1，<code>pointer-events: auto</code>（默认即可）</li>
<li>通过 <code><area></code> 的 <code>coords</code> 和图片原始尺寸，按比例算出覆盖层宽高与 <code>top/left</code>
</li>
<li>注意响应式场景下需监听 <code>window.resize</code> 重算位置</li>
</ul>
<p>优势是事件原生可靠，代码易读；缺点是 DOM 节点增多，多边形区域需用 <code>clip-path</code> 或 SVG 模拟。</p>
<h3>切图切换时容易忽略的性能与体验细节</h3>
<p>频繁切换图片可能引发抖动或加载延迟，尤其在移动设备上：</p>
<ul>
<li>提前用 <code>new Image().src = url</code> 预加载所有 hover 图片，避免首次悬停时白屏</li>
<li>加防抖（debounce）：鼠标在区域边缘小幅晃动时，不要反复触发切换</li>
<li>移动端无 hover，需补充 <code>click</code> 或 <code>touchstart</code> 作为 fallback</li>
<li>若使用 <code><picture></picture></code> 或 <code>srcset</code>，确保 <code>dataset.hoverSrc</code> 指向的是完整 URL，而非相对路径片段</li>
</ul>
<p>最麻烦的其实是 coords 坐标系和图片缩放的匹配——浏览器渲染时若图片被 CSS 缩放（如 <code>width: 100%</code>），<code><area></code> 的 <code>coords</code> 仍按原始尺寸解析，必须按缩放比换算，这点几乎每次都会出错。</p>
</div></code></p>前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
