如何使用CSS/JavaScript为<area>标签添加悬停效果

Hey，我知道你为啥这个悬停效果没生效——<area>标签本身不支持background-color这类背景样式，它是个特殊的替换元素，直接写CSS背景色肯定没用的。给你几个可行的解决方案，你可以根据自己的情况选：

方法一：用CSS伪元素模拟悬停层 #

这个方法不需要改太多现有结构，通过伪元素来模拟悬停时的背景区域：

首先给你的图片和map套一个相对定位的容器：

<div class="map-container" style="position: relative; display: inline-block;">
  <img src="imgmap.png" usemap="#image-map">
  <map name="image-map">
    <!-- 注意这里给area加了class，coords补全完整值 -->
    <area class="x1" target="_self" alt="floor3" title="floor3" href="" coords="113,228,369,107,480,230,324,351" shape="poly">
  </map>
  <div class="hover-overlay"></div>
</div>

然后写对应的CSS：

.map-container {
  position: relative;
  display: inline-block;
}
.hover-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* 不干扰原area的点击、跳转功能 */
}
/* 当area hover时，显示伪元素的背景 */
.x1:hover ~ .hover-overlay::before {
  content: '';
  position: absolute;
  /* 根据area的coords生成clip-path，对应你的多边形坐标 */
  clip-path: polygon(113px 228px, 369px 107px, 480px 230px, 324px 351px);
  background-color: rgba(30, 173, 104, 0.5); /* 加透明度让原图可见，体验更好 */
  width: 100%;
  height: 100%;
}

方法二：用SVG替代Image Map（更推荐） #

SVG本身支持路径的hover样式，比传统image map更灵活，兼容性也更好：

把你的图片放进SVG里，然后用<path>绘制对应的可交互区域：

<svg width="500" height="400" xmlns="http://www.w3.org/2000/svg">
  <!-- 加载背景图 -->
  <image href="imgmap.png" width="100%" height="100%" />
  <!-- 可交互的区域，默认透明，hover时显示背景 -->
  <a href="" target="_self">
    <path d="M113 228 L369 107 L480 230 L324 351 Z" fill="transparent" />
    <path d="M113 228 L369 107 L480 230 L324 351 Z" fill="rgba(30,173,104,0.5)" opacity="0" class="floor3-hover" />
  </a>
</svg>

然后给hover状态写CSS：

.floor3-hover:hover {
  opacity: 1 !important;
}

方法三：用JavaScript动态创建遮罩层 #

如果你的area坐标经常变化，或者需要更灵活的控制，可以用JS来动态生成悬停层：

先给图片套容器：

<div class="map-container" style="position: relative; display: inline-block;">
  <img src="imgmap.png" usemap="#image-map">
  <map name="image-map">
    <area class="x1" target="_self" alt="floor3" title="floor3" href="" coords="113,228,369,107,480,230,324,351" shape="poly">
  </map>
</div>

然后写JS和CSS：

.map-container {
  position: relative;
  display: inline-block;
}
.area-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

const area = document.querySelector('.x1');
const container = document.querySelector('.map-container');

// 鼠标移入时创建遮罩层
area.addEventListener('mouseover', () => {
  const coords = area.coords.split(',').map(Number);
  const overlay = document.createElement('div');
  overlay.className = 'area-overlay';
  // 把coords转成clip-path的多边形格式
  const polygonPath = coords.reduce((path, val, index) => {
    if (index % 2 === 0) {
      return path + `${val}px ${coords[index+1]}px, `;
    }
    return path;
  }, '').slice(0, -2); // 去掉最后多余的逗号空格
  overlay.style.clipPath = `polygon(${polygonPath})`;
  overlay.style.backgroundColor = 'rgba(30,173,104,0.5)';
  container.appendChild(overlay);
});

// 鼠标移出时移除遮罩层
area.addEventListener('mouseout', () => {
  const overlay = document.querySelector('.area-overlay');
  if (overlay) overlay.remove();
});

这三个方法里，我最推荐用SVG的方案，不仅实现简单，后续维护坐标也更方便，还能支持更多交互效果~

内容的提问来源于stack exchange，提问作者Aldamr