area标签无法CSS高亮，因其不渲染、无盒模型、不支持hover等样式；需用JS动态创建覆盖层并按缩放比换算coords定位。
纯 CSS 无法直接让 area 标签高亮显示，因为它不渲染任何视觉内容，也不支持 background、border 等样式属性。 想实现鼠标悬停/点击时的热区高亮效果，必须用 JavaScript 动态创建覆盖层（如 <div>），再用 CSS 控制其外观和定位。
为什么 area 本身不能加 CSS 高亮
area 是一个透明、无尺寸、不参与渲染的空元素。它只在浏览器坐标系统中“注册”点击区域，但 DOM 中查不到它的盒模型，开发者工具里也看不到它的边界。因此：
-
area:hover选择器完全无效 -
area不响应transition、transform或outline - 即使强行写
style="background:red"，页面上也绝不会出现红色块 -
title属性在现代浏览器中基本被忽略，不能当提示文案用
用 JS + CSS 实现可高亮的热区覆盖层
核心思路是：读取每个 area 的 shape 和 coords，结合图片原始尺寸与当前显示尺寸，算出对应位置和大小，动态插入一个绝对定位的 <div class="hotspot">，再用 CSS 控制它的外观。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 监听
img.load和window.resize，确保缩放后覆盖层仍对齐 - 对
shape="rect"，直接用left/top/width/height定位 - 对
shape="circle"，用border-radius: 50%+transform: translate() - 对
shape="poly"，需用clip-path: polygon(...)截取形状（注意 Safari 兼容性） - 所有覆盖层统一加
pointer-events: none，再在area上绑定事件委托，避免遮挡原点击逻辑
coords 坐标必须按原始尺寸换算，否则高亮错位
浏览器始终把 coords 当作原始图片像素（img.naturalWidth/img.naturalHeight）来解析。如果图片用了 max-width: 100% 或 width: 50%，那直接拿 coords 值去设 div 的 left 和 top 会严重偏移。
立即学习“前端免费学习笔记（深入）”；
- 正确做法：计算缩放比 =
img.offsetWidth / img.naturalWidth（宽高比可能不同，建议分别算） - 矩形热区：
left = coords[0] * scaleW，width = (coords[2] - coords[0]) * scaleW - 圆形热区：
left = (coords[0] - coords[2]) * scaleW，width = coords[2] * 2 * scaleW - 多边形热区：每个
x坐标 ×scaleW，每个y坐标 ×scaleH，再拼成polygon()字符串
移动端触控体验容易被忽略的硬性限制
即使高亮层画得再准，如果热区物理尺寸太小，用户依然点不准。这不是样式问题，而是人机交互规范约束：
- iOS 和 Android 都要求最小触控目标 ≥
44×44px（CSS 像素），否则误触率陡增 - 原始
coords算出的热区若小于该值，必须强制放大——哪怕图形变形，也比点不中强 - 不要依赖
touch-action: manipulation来“修复”小热区，它只优化滚动延迟，不扩大点击范围 - 真机测试比模拟器重要得多；Chrome DevTools 的设备模拟无法反映手指实际覆盖面积
