HTML/CSS实现建筑楼层Hover变色功能问题求助

嘿，我来帮你搞定这个楼层悬停高亮的问题！你遇到的核心问题其实是热区坐标不准确，还有事件绑定的范围不对，咱们一步步来解决：

1. 精准生成每个楼层的热区坐标 #

你现在的<area>只有一个，而且coords完全不对，这就是为什么只有底部区域能触发的原因。要精准对应每个楼层，你需要：

• 找个在线的图片热区生成工具，上传你的建筑原图（https://i.sstatic.net/E26AS.jpg）
• 手动框选每一层的区域，工具会自动生成对应的coords和shape参数
• 给每个<area>加上标识，比如data-floor属性，用来关联对应的高亮层

示例修正后的<map>代码（假设已经生成了各楼层的coords）：

<map name="image-map">
  <!-- 4楼区域 -->
  <area data-floor="4" target="" alt="4楼" title="4楼" href="" coords="xxx,xxx,xxx,xxx,xxx,xxx" shape="poly">
  <!-- 3楼区域 -->
  <area data-floor="3" target="" alt="3楼" title="3楼" href="" coords="xxx,xxx,xxx,xxx,xxx,xxx" shape="poly">
  <!-- 2楼区域 -->
  <area data-floor="2" target="" alt="2楼" title="2楼" href="" coords="xxx,xxx,xxx,xxx,xxx,xxx" shape="poly">
  <!-- 1楼区域 -->
  <area data-floor="1" target="" alt="1楼" title="1楼" href="" coords="xxx,xxx,xxx,xxx,xxx,xxx" shape="poly">
  <!-- 0楼区域 -->
  <area data-floor="0" target="" alt="0楼" title="0楼" href="" coords="xxx,xxx,xxx,xxx,xxx,xxx" shape="poly">
</map>

2. 修正事件绑定逻辑 #

你之前把事件绑定到了整个<map>上，这样不管悬停哪个区域都会触发同一个高亮。现在要绑定到每个<area>，根据data-floor的值来切换对应楼层的高亮：

$(document).ready(function () {
  // 悬停显示对应楼层高亮
  $('map area').on('mouseenter', function () {
    const floor = $(this).data('floor');
    $(`.highlight-${floor}`).show();
  });
  // 离开隐藏对应楼层高亮
  $('map area').on('mouseleave', function () {
    const floor = $(this).data('floor');
    $(`.highlight-${floor}`).hide();
  });
});

3. 确保高亮层和主图位置完全对齐 #

这一步很关键，如果高亮图和主建筑图位置不对，就算热区准了，高亮也会错位。调整你的CSS，让所有高亮层和主图的位置参数完全一致：

.highlight {
  z-index: 9999;
  display: none;
  pointer-events: none;
  /* 和主图保持相同的定位和边距 */
  position: absolute;
  margin-left: 11%;
}
.building {
  position: absolute;
  margin-left: 11%;
  box-shadow: 0 15px 30px rgba(0, 0, 0, .6);
}

关键注意点 #

• coords必须精准：一定要用工具对着原图仔细框选每个楼层的边缘，坐标错了一切白搭
• 层叠顺序：确保.highlight的z-index比主图高，这样高亮才能显示在上面
• pointer-events: none：这个属性要保留，不然高亮层会挡住热区的鼠标事件

内容的提问来源于stack exchange，提问作者Sergiu Tonț