area标签不支持CSS transition，因其为不可渲染元素；视觉反馈需用JS创建与coords对齐的覆盖层并应用过渡动画，且须按图片缩放比例重算坐标，同时保障无障碍和降级可用性。
area 标签本身不支持 transition
直接给 <area> 写 transition 没有效果，因为 <area> 是不可渲染元素——它没有盒模型、不占布局、无法设置宽高、背景或边框，CSS 过渡无从作用于其样式变化。
常见误解是以为加个 transition: opacity 0.3s; 就能让热点区域“淡入”，但浏览器根本不会触发重绘，控制台也不会报错，只会静默失效。
视觉反馈必须靠 JavaScript + 覆盖层实现
想让点击区域有过渡动画（比如悬停放大、变色、描边浮现），得用 JS 动态创建一个与 <area> 坐标对齐的 <div> 或 <span>，再对这个真实 DOM 元素应用 CSS 过渡。
-
<area>只负责逻辑点击绑定（href或onclick） - 覆盖层需监听
mouseenter/mouseleave，并用 JS 计算coords转为绝对定位（注意图片缩放时要同比例重算） - 覆盖层的
transition必须写在初始 class 中，例如：.hotspot { opacity: 0; transition: opacity 0.2s ease, transform 0.2s; } - 避免用
display: none/block控制显隐——改用opacity+visibility才能触发过渡
coords 值缩放后必须重映射，否则覆盖层错位
<area coords="10,20,50,60"> 是基于原始图片尺寸（如 800×600）定义的。一旦图片用 width: 100% 或 max-width 缩放，坐标就失效了。
立即学习“前端免费学习笔记（深入）”；
JS 中需同步监听 img.onload 和 window.resize，按比例换算：
const scale = img.offsetWidth / img.naturalWidth;
const x1 = parseInt(area.coords.split(',')[0]) * scale;漏掉这步，悬停动画会飘在错误位置，且无法通过纯 CSS 修复。
无障碍和可访问性不能只靠 area 的 alt
<area> 的 alt 属性是必需的，但它只服务屏幕阅读器；用户看不到视觉反馈，就缺乏操作确认。
覆盖层应补充：
- 用
aria-label关联对应<area>的语义 - 悬停/聚焦时用
outline或box-shadow提供视觉锚点 - 避免仅依赖颜色区分状态（如只变红），加图标或文字提示更稳妥
最易被忽略的是：过渡效果不是目的，而是增强「可感知性」的手段——如果 JS 失效或图片未加载，<area> 的基础跳转必须仍可用。
