area标签无法css高亮，因其不渲染、无盒模型、不支持hover等样式；需用js动态创建覆盖层并按缩放比换算coords定位。

纯 CSS 无法直接让 area 标签高亮显示，因为它不渲染任何视觉内容，也不支持 background、border 等样式属性。 想实现鼠标悬停/点击时的热区高亮效果，必须用 JavaScript 动态创建覆盖层（如 <div>），再用 CSS 控制其外观和定位。<h3>为什么 <code>area 本身不能加 CSS 高亮

area 是一个透明、无尺寸、不参与渲染的空元素。它只在浏览器坐标系统中“注册”点击区域，但 DOM 中查不到它的盒模型，开发者工具里也看不到它的边界。因此：

• area:hover 选择器完全无效
• area 不响应 transition、transform 或 outline
• 即使强行写 style="background:red"，页面上也绝不会出现红色块
• title 属性在现代浏览器中基本被忽略，不能当提示文案用

用 JS + CSS 实现可高亮的热区覆盖层

核心思路是：读取每个 area 的 shape 和 coords，结合图片原始尺寸与当前显示尺寸，算出对应位置和大小，动态插入一个绝对定位的 <div class="hotspot">，再用 CSS 控制它的外观。<ul> <li>监听 <code>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 会严重偏移。

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

• 正确做法：计算缩放比 = 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 的设备模拟无法反映手指实际覆盖面积