area标签不可样式化，无法直接应用CSS过渡动画；需通过JavaScript监听其mouseover事件，动态创建带transition的绝对定位提示div，并根据coords计算锚点位置实现渐显效果。
area 标签本身不支持 CSS 过渡动画
直接给 <area> 加 transition 或 opacity 是无效的——它是个**完全不可见、不可样式化的空元素**，浏览器根本不渲染它，也不响应任何 CSS 动画属性。你看到的“热点区域”只是 <map> 和 <img> 协同工作的逻辑映射，不是 DOM 可视节点。
想实现“鼠标移入某块热区时渐显提示”，必须绕过 <area> 本身，用其他可动画的元素模拟提示层。
用绝对定位 + data-* 属性联动实现提示浮层
核心思路：把 <area> 当作事件源，用 JavaScript 监听 mouseenter，根据其 data-tooltip 和坐标（coords）动态创建/显示一个带 transition 的 <div> 提示框。
-
<area>必须有data-id或data-tooltip，方便绑定内容 - 解析
coords（如"100,50,150,100"）取中心点作为提示框锚点 - 提示
<div>需设position: absolute、opacity: 0、transition: opacity 0.2s - 避免用
display: none切换——它会中断 transition；改用visibility: hidden+opacity
<img src="map.png" usemap="#region-map"> <map name="region-map"> <area shape="rect" coords="100,50,150,100" data-tooltip="服务器机房" data-id="server"> </map>
监听 area 事件时注意坐标系和冒泡限制
<area> 不触发原生 mouseenter，但支持 mouseover 和 mouseout；且事件**不会冒泡到 <map>**，必须直接绑定在 <area> 元素上。
立即学习“前端免费学习笔记（深入）”；
- 获取图片实际渲染尺寸（非原始宽高），用
getBoundingClientRect()算相对偏移 - 如果图片被缩放（如 CSS
width: 100%），coords值需按比例换算 - 多个
<area>共享同一提示容器更轻量，每次只更新内容+位置，避免频繁 DOM 创建 - 别忘了加
pointer-events: none到提示框上，防止遮挡后续area事件
移动端点击区域小，需兼容 touchstart 并加防抖
纯 mouseover 在手机上不触发，必须监听 touchstart；但触摸屏容易误触，建议加 150ms 防抖，且提示出现后 3 秒自动隐藏。
- 用
setTimeout控制显示延迟，避免快速划过多个区域时提示乱跳 - 移出图片区域或点击空白处时，清除定时器并隐藏提示
- iOS Safari 对
position: fixed在<img>内的定位有偏差，优先用absolute+ 父容器relative
真正难的不是写动画，是让提示始终贴着热区中心、不被截断、不挡住操作——这些细节比过渡效果本身更消耗调试时间。
