area标签本身不支持高亮选中状态，因其是无渲染的空元素，无法响应:hover/:active/:focus；高亮需通过js监听area事件+css控制叠加层实现，且须处理坐标归一化与无障碍适配。
area 标签本身不支持高亮选中状态
area 是空元素，只定义图像上的坐标区域，浏览器不会为它渲染视觉反馈。它没有 :hover 伪类的默认高亮行为（除非你手动加 CSS），更没有 :active 或 :focus 的可交互状态——因为它不能获取焦点，也不能被点击后“保持选中”。常见错误是以为给 area 加 class="selected" 就能触发样式，但实际无效：CSS 选择器无法匹配到 area 的渲染节点（它不生成 box）。
真正能响应交互、支持高亮的，是它关联的 img 元素，或者你额外叠加的 DOM 层（如 SVG 或绝对定位的 div）。
用 CSS + JavaScript 模拟 area 高亮效果
核心思路：监听 area 的点击或 hover，动态修改 img 的 data-highlight 属性，再用 CSS 选择器控制叠加层显示。
- 确保
area在map内且有唯一id，例如<area id="region-a" shape="rect" coords="10,20,100,80" href="#"> - 在
img后紧跟一个同尺寸的<div class="overlay"></div>，并设position: relative包裹两者 - 为每个区域预定义 CSS 覆盖块，例如：
.overlay::before { content: ''; position: absolute; top: 20px; left: 10px; width: 90px; height: 60px; background: rgba(255,215,0,0.3); opacity: 0; transition: opacity 0.2s; } - JS 中监听
area点击，用dataset.highlight = "region-a"更新img，再让对应::before的opacity变为1
area 坐标与实际图片尺寸不匹配导致高亮偏移
这是最常踩的坑：Photoshop 或截图工具导出的坐标是基于原始图片分辨率，而页面中 img 被 CSS 缩放（如 width: 100%）后，coords 值不再适用。
- 必须使用
img的自然尺寸（naturalWidth/naturalHeight）做归一化计算 - 若图片响应式缩放，需监听
resize并重算所有area对应的 overlay 位置 - 更稳的做法：改用 SVG 替代
map+area，SVG<path></path>支持transform和百分比坐标，缩放时自动适配 - 调试技巧：临时加
border: 1px solid red到 overlay 元素，确认是否贴合目标区域
无障碍和键盘操作下 area 无法被聚焦
area 默认不可键盘聚焦，tabindex 对它无效；屏幕阅读器也仅读取 alt，不识别“当前选中”。要支持键盘导航和读屏，必须绕过原生 area。
- 放弃
area，改用带role="button"的<div> 绝对定位覆盖在图片上，并同步管理 <code>aria-pressed和tabindex - 若必须保留
area语义（如 SEO 或旧系统兼容），至少给外层map加aria-label，并在 JS 中用focus()模拟焦点跳转到对应区域描述容器 - 注意：
href="#"会触发页面跳顶，务必event.preventDefault()，否则键盘用户按回车后体验断裂
真实高亮逻辑不在
area 上，而在你可控的 DOM 层和状态管理里。坐标偏移、缩放失准、键盘不可达——这些问题全是因为把 area 当成了“可交互组件”，但它只是个声明式坐标锚点。
