鼠标悬停时Image Map的Tooltip频繁闪烁问题求助

嘿，这个闪烁问题我太熟了！核心原因是tooltip显示后会覆盖在对应的area区域上方，导致鼠标触发了mouseleave事件；tooltip消失后鼠标又回到area上，再次触发mouseenter，就这样循环往复造成了恼人的闪烁。下面给你两个简单有效的解决方案：

方案一：给tooltip添加pointer-events: none #

这个方法最简单直接，让tooltip不接收任何鼠标事件——这样即使鼠标放在tooltip上，也不会影响下面的area元素，从根源上切断闪烁循环：

修改CSS中的.tooltip样式：

.tooltip {
  position: absolute;
  z-index: 9999;
  border: 1px solid black;
  min-width: 100px;
  max-width: 150px;
  background: white;
  pointer-events: none; /* 添加这一行即可 */
}

方案二：调整tooltip位置，避免覆盖area #

如果不想用pointer-events，可以把tooltip的位置偏移一点，让它显示在area旁边而不是正上方，这样鼠标就不会误触tooltip触发mouseleave：

修改JS中的updateTooltip函数：

function updateTooltip() {
  tooltip.style.display = "block"
  tooltip.innerHTML = this.getAttribute('data-text');
  var coordinates = this.getAttribute('coords').split(',')
  // 给left和top各加20px偏移，避开area区域
  tooltip.style.left = (parseInt(coordinates[0]) + 20) + 'px';
  tooltip.style.top = (parseInt(coordinates[coordinates.length - 1]) + 20) + 'px';
}

额外优化：修正HTML结构 #

另外注意到你把<div class="tooltip">放在了<map>标签里面，这其实不符合HTML规范——map标签只能包含<area>元素，建议把tooltip移到parent容器里，和img、map同级：

<div class="parent">
  <img id="mapImage" src="https://i.imgur.com/Y7HuHDQ.png" usemap="#image-map">
  <map name="image-map">
    <area target="" data-text="USA Shops: Manchester,TN - Num: 6621418372 WIXOM ,MI - Num:662728173" alt="USA" title="USA" href="" coords="110,140,182,141,186,148,198,146,198,140,214,139,224,134,234,143,221,150,213,154,205,156,205,170,199,174,194,181,193,188,162,182,158,171,149,173,145,179,141,170,124,168,121,173,112,168,105,158" shape="poly">
    <area target="" data-text="Mexico Shops: Manchester,TN - Num: 6621418372 WIXOM ,MI - Num:662728173" alt="MEXICO" title="MEXICO" href="" coords="124,172,137,171,141,178,152,173,160,181,162,204,179,199,179,211,157,212,173,216,146,204,136,196,125,188" shape="poly">
    <area target="" data-text="Japan Shops: Manchester,TN - Num: 6621418372 WIXOM ,MI - Num:662728173" alt="JAPAN" title="JAPAN" href="" coords="705,106,716,106,721,146,687,184,667,175" shape="poly">
    <area target="" data-text="Germany Shops: Manchester,TN - Num: 6621418372 WIXOM ,MI - Num:662728173" alt="GERMANY" title="GERMANY" href="" coords="418,111,436,108,433,124,418,124" shape="poly">
  </map>
  <!-- 把tooltip移到这里，符合HTML规范 -->
  <div class="tooltip" id="tooltip"></div>
</div>

上述方案任选其一就能解决闪烁问题，推荐方案一，简单高效，不需要调整复杂的位置逻辑~

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