如何实现图片热点区域悬停下拉菜单 解决菜单超出图片无法选中问题

问题根源 #

你现有代码的核心问题有两个：

1. 结构不规范：<map>标签仅支持嵌套<area>子元素，你放入的<div>会被浏览器自动移出<map>节点，导致hover关联逻辑完全失效
2. 定位逻辑错误：.dropdown-content用了相对定位，会默认跟随文档流排列到图片外侧，且无法固定在热点区域附近

修复后可运行代码 #

CSS部分

/* 外层容器，作为下拉菜单的定位基准 */
.image-map-wrapper {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  /* 可根据热点位置调整top和left值，让菜单刚好出现在热点旁边 */
  top: 10px;
  left: 90px;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 99;
}

/* 不同热点对应的菜单可单独设置位置 */
.dropdown-content.venus-menu {
  left: 130px;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {
  background-color: #ddd;
}

/* 鼠标悬停在菜单上时保持显示 */
.dropdown-content:hover {
  display: block;
}

HTML+JS部分

<!DOCTYPE html>
<html>
<body>
  <div class="image-map-wrapper">
    <img src="https://www.w3schools.com/tags/planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
    <!-- 太阳对应的下拉菜单 -->
    <div class="dropdown-content sun-menu">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
    <!-- 金星对应的下拉菜单 -->
    <div class="dropdown-content venus-menu">
      <a href="#">Link 4</a>
      <a href="#">Link 5</a>
      <a href="#">Link 6</a>
    </div>

    <map name="planetmap">
      <area shape="rect" coords="0,0,82,126" alt="Sun" href="#" data-menu="sun-menu">
      <area shape="circle" coords="90,58,3" alt="Mercury" href="#">
      <area shape="circle" coords="124,58,8" alt="Venus" href="#" data-menu="venus-menu">
    </map>
  </div>

  <script>
    // 绑定所有带菜单的热点事件
    const areas = document.querySelectorAll('area[data-menu]')
    const menus = document.querySelectorAll('.dropdown-content')

    areas.forEach(area => {
      // 悬停热点时显示对应菜单
      area.addEventListener('mouseenter', () => {
        menus.forEach(menu => menu.style.display = 'none')
        const targetMenu = document.querySelector(`.${area.dataset.menu}`)
        if(targetMenu) targetMenu.style.display = 'block'
      })
      // 移出热点时延迟200ms隐藏，给鼠标移到菜单预留时间
      area.addEventListener('mouseleave', () => {
        setTimeout(() => {
          menus.forEach(menu => {
            if(!menu.matches(':hover')) menu.style.display = 'none'
          })
        }, 200)
      })
    })

    // 鼠标移出菜单后隐藏
    menus.forEach(menu => {
      menu.addEventListener('mouseleave', () => {
        menu.style.display = 'none'
      })
    })
  </script>
</body>
</html>

调整说明 #

• 所有下拉菜单的定位都以图片外层容器为基准，不会跑出图片显示范围
• 可以根据热点的实际坐标，单独调整每个菜单的top和left属性，适配不同的显示需求
• 延迟隐藏逻辑保证了鼠标可以从热点平滑移动到菜单上，不会出现中途菜单消失无法点击的问题

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