单张不规则图片不同区域hover颜色设置难题求助

嘿，这个问题我之前帮不少开发者捋清楚过！不规则图片的分区域hover效果确实有点绕，但其实有几种靠谱的方案，我给你拆解一下：

这个方法不用改图片格式，适合给现有位图加效果：

• 先找个在线的图片区域生成工具，把你的不规则图片划分成对应区域，得到每个区域的shape和coords参数，生成<map>和<area>标签。
• 在图片上方叠一个绝对定位的容器，里面放和每个区域形状完全匹配的透明元素，用clip-path来复刻区域形状，hover时给这些元素加半透明背景色。

代码示例：

<div class="image-wrap">
  <img src="your-irregular-pic.png" usemap="#customMap" alt="不规则图片">
  <map name="customMap">
    <area shape="poly" coords="15,20, 60,40, 45,85" href="#" alt="区域1" class="area-1">
    <area shape="circle" coords="120,90,25" href="#" alt="区域2" class="area-2">
  </map>
  <!-- 悬浮颜色层 -->
  <div class="hover-overlay">
    <div class="hover-block block-1" style="clip-path: polygon(15px 20px, 60px 40px, 45px 85px);"></div>
    <div class="hover-block block-2" style="clip-path: circle(25px at 120px 90px);"></div>
  </div>
</div>

对应的CSS：

.image-wrap {
  position: relative;
  display: inline-block;
}

.hover-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* 让鼠标事件穿透到底层图片 */
}

.hover-block {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: auto; /* 恢复当前区域的鼠标交互 */
  opacity: 0;
  transition: opacity 0.3s ease;
}

.block-1:hover {
  background-color: rgba(255, 80, 80, 0.5);
  opacity: 1;
}

.block-2:hover {
  background-color: rgba(80, 180, 80, 0.5);
  opacity: 1;
}

如果你的图片能转成SVG（比如原本就是矢量图，或者用工具把位图转成矢量），这是最省心的方案——每个不规则区域就是SVG里的独立<path>/<shape>元素，直接给元素加CSS hover样式就行：

代码示例：

<svg width="250" height="250" viewBox="0 0 250 250">
  <!-- 第一个不规则区域 -->
  <path d="M15 20 L60 40 L45 85 Z" fill="#e0e0e0" class="svg-area area-1"/>
  <!-- 第二个圆形区域 -->
  <circle cx="120" cy="90" r="25" fill="#f0f0f0" class="svg-area area-2"/>
</svg>

CSS：

.svg-area {
  transition: fill 0.3s ease;
  cursor: pointer;
}

.area-1:hover {
  fill: rgba(255, 80, 80, 0.7);
}

.area-2:hover {
  fill: rgba(80, 180, 80, 0.7);
}

这个方法的好处是无失真缩放，不需要额外的hover层，交互逻辑也更简洁。

如果图片是特别复杂的位图，没法做image map也转不了SVG，可以用JS监听鼠标位置，通过「点-in-多边形」算法判断鼠标在哪个区域，动态显示对应颜色：

核心逻辑示例：

const image = document.getElementById('irregular-img');
const overlay = document.getElementById('color-overlay');

// 提前定义每个区域的坐标点数组
const areas = [
  { coords: [[15,20], [60,40], [45,85]], color: 'rgba(255,80,80,0.5)' },
  { coords: [[95,65], [145,65], [120,110]], color: 'rgba(80,180,80,0.5)' }
];

image.addEventListener('mousemove', (e) => {
  const rect = image.getBoundingClientRect();
  const x = e.clientX - rect.left;
  const y = e.clientY - rect.top;

  let targetArea = null;
  // 遍历所有区域，判断鼠标是否在区域内
  for (const area of areas) {
    if (isPointInPolygon(x, y, area.coords)) {
      targetArea = area;
      break;
    }
  }

  // 更新overlay样式
  if (targetArea) {
    overlay.style.backgroundColor = targetArea.color;
    overlay.style.opacity = 1;
  } else {
    overlay.style.opacity = 0;
  }
});

// 点-in-多边形判断函数
function isPointInPolygon(x, y, vertices) {
  let inside = false;
  for (let i = 0, j = vertices.length - 1; i < vertices.length; j = i++) {
    const [xi, yi] = vertices[i];
    const [xj, yj] = vertices[j];
    const intersect = ((yi > y) !== (yj > y)) && 
      (x < (xj - xi) * (y - yi) / (yj - yi) + xi);
    if (intersect) inside = !inside;
  }
  return inside;
}

你可以根据自己的场景选最合适的方法——SVG方案优先，image map适合快速改造现有图片，JS方法留作极端情况的备用。如果还有具体细节卡壳，比如怎么生成区域坐标，随时问我就行！

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