本文介绍如何通过 data-maphilight 属性灵活修改 maphilight 插件高亮区域的边框颜色、填充色等样式，无需修改 js 源码或覆盖 css，简单高效。
maphilight 是一个轻量级 jQuery 插件，用于为 HTML <area> 热点区域添加视觉高亮效果（如描边、填充、阴影等）。默认情况下，它使用红色边框（strokeColor: "ff0000"），但你完全可以通过内联的 data-maphilight 属性来自定义样式，且支持逐个区域独立配置。
✅ 正确用法：使用 data-maphilight 属性
在 <area> 标签中添加 data-maphilight 属性，并传入 JSON 字符串，指定 strokeColor（十六进制颜色值，不带 #）即可：
<area id="left-eye"
coords="118,36,148,80"
shape="rect"
href="javascript:void(0);"
data-maphilight='{"strokeColor":"0000ff", "fillColor":"0000ff", "fillOpacity":0.2}'><area id="mouth"
coords="121,84,198,118"
shape="rect"
data-maphilight='{"strokeColor":"00cc66", "strokeWidth":3, "fade":true}'>? 注意：JSON 值中的颜色必须为 6 位纯十六进制（如 "ff0000"），不能带 # 符号，否则解析失败，将回退至默认红色。
? 其他常用可配置项（支持组合设置）
| 参数 | 类型 | 说明 |
|---|---|---|
| strokeColor | string | 边框颜色（如 "ff0000"） |
| strokeWidth | number | 边框粗细（默认 1） |
| fillColor | string | 填充颜色（默认透明） |
| fillOpacity | number (0–1) | 填充不透明度（如 0.3） |
| fade | boolean | 是否启用淡入动画（默认 true） |
| alwaysOn | boolean | 是否常驻高亮（不依赖 hover/click） |
例如，实现蓝色描边 + 半透明浅蓝填充 + 加粗边框：
data-maphilight='{"strokeColor":"0066cc", "strokeWidth":2, "fillColor":"cce6ff", "fillOpacity":0.4}'⚠️ 注意事项
- ❌ 不要尝试用 CSS 的 outline 或 border 覆盖 —— maphilight 绘制的是 <canvas> 或 SVG 覆盖层，非原生元素样式；
- ❌ 避免在初始化时全局覆盖选项（如 $('.map').maphilight({strokeColor: '...'})），这会统一影响所有区域；如需差异化样式，务必使用 data-maphilight 属性；
- ✅ 支持动态更新：修改 data-maphilight 后，调用 .maphilight('redraw') 可实时刷新（需确保插件版本 ≥ 1.4.0）；
- ✅ 建议将 data-maphilight 与 id/class 结合，便于后续 JS 动态注入（例如根据数据状态切换颜色）。
✅ 完整初始化建议（增强兼容性）
$(function() {
// 初始化 maphilight（支持 data-maphilight 解析）
$('.map').maphilight({
neverOn: false, // 允许手动触发
wrapClass: true // 为 canvas 添加 class 方便调试
});
// 如需响应式适配，保留 imageMapResize()
imageMapResize();
});通过 data-maphilight，你既能保持 HTML 结构清晰，又能实现像素级样式控制——这是 maphilight 推荐的标准实践，也是解决“为什么 outline 不生效”这类问题的根本路径。
