本文讲解如何修复因图片重叠或布局错位导致的鼠标悬停（mouseover）时地图图像跳动、热点区域（area）偏移的常见问题，核心方案是统一容器定位、移除干扰换行符，并优化交互逻辑。
在您提供的代码中，地图切换依赖于 热区触发 mouseover/mouseout 事件来显示/隐藏对应颜色路线图（如 #bh、#mariana 等），同时隐藏基础图 #base。但实际运行中出现图像“跳动”和热区“失准”，根本原因并非 JavaScript 逻辑错误，而是 HTML 布局与 CSS 渲染层面的视觉位移。
? 问题根源分析
- 每个路线 PNG 图像（#bh, #mariana, #ob, #transfer）与 #base 很可能被置于不同 或存在
换行标签，导致浏览器为每张图分配独立的文档流位置；- 当 #base.hide() 后，其占据的空间塌陷，下方图像上移，进而使
- 此外，若各图尺寸不完全一致或未设置 position: absolute，切换时页面重排（reflow）会加剧抖动。
✅ 推荐解决方案（结构 + 样式 + 脚本协同）
1. 统一容器 + 绝对定位（关键！）
将所有地图图像包裹在同一个 relative 容器内，并让它们以 absolute 叠加，确保坐标系稳定：
<div id="map-container" style="position: relative; display: inline-block;"> <img id="base" src="/images/map-base.png" usemap="#legenda" alt="Mapa base" /> <img id="bh" src="/images/map-bh.png" usemap="#legenda" alt="Rota BH" style="max-width:90%" /> <img id="mariana" src="/images/map-mariana.png" usemap="#legenda" alt="Rota Mariana" style="max-width:90%" /> <img id="ob" src="/images/map-ob.png" usemap="#legenda" alt="Rota OB" style="max-width:90%" /> <img id="transfer" src="/images/map-transfer.png" usemap="#legenda" alt="Rota Transfer" style="max-width:90%" /> </div>
✅ 优势：所有图像共享同一坐标原点，切换时无位移； 始终绑定到容器内首张可见图（推荐始终绑定到 #base 并保持其 usemap 属性）。
2. 移除冗余
与空白节点检查 HTML 源码中图像标签之间是否残留
、空格或换行符（尤其在 PHP 模板中易被 get_template_part() 插入）。这些空白会触发行内元素换行，破坏 inline-block 或 flex 布局稳定性。建议压缩输出或显式设置：#map-container img { vertical-align: top; /* 消除基线对齐导致的间隙 */ }3. 增强脚本健壮性（可选优化）
当前 jQuery 代码存在重复绑定风险（.each() 内多次调用 .mouseover()）。改用事件委托更安全：
<script> $(document).ready(function() { // 使用事件委托，避免重复绑定 $('#legenda area').on('mouseenter', function(e) { e.preventDefault(); const targetId = '#' + $(this).attr('alt'); $('#base').hide(); $(targetId).show(); }).on('mouseleave', function(e) { e.preventDefault(); const targetId = '#' + $(this).attr('alt'); $(targetId).hide(); $('#base').show(); }); // 初始化：确保仅 base 显示 $('#bh, #mariana, #ob, #transfer').hide(); }); </script>? 交互体验优化建议
- 如答案中所提，将四个彩色图例（squares）移出地图区域，置于图例栏（legend bar），并添加明确文字标签（如“Belo Horizonte → Arcanjo”），显著提升可用性；
- 为热区添加 cursor: pointer 样式，提供视觉反馈；
- 考虑添加淡入淡出过渡（CSS opacity + transition），比硬切更平滑。
通过以上三步——结构归一化、空白清除、脚本精简——即可彻底解决悬停跳动与热区漂移问题，无需修改
