鼠标悬停图片映射区域时显示Div的jQuery实现方案咨询

数据老陈

2026-5-22

方案可行性确认

你的这个思路完全可行！利用area标签的item属性与对应div的id做关联，通过移除/添加.hide类来控制元素的显示与隐藏，逻辑清晰且易于维护，新增热点区域时只要保证item值和div的id对应上就行，非常适合你现在15个热点的场景。

具体jQuery代码实现

假设你的隐藏div结构是这样的（每个div的id和对应area的item值一致，默认带.hide类）：

<div id="brand" class="hide">品牌评估的展示内容</div>
<div id="marketing" class="hide">营销相关的展示内容</div>
<!-- 更多对应你的热点的div -->

下面是实现需求的jQuery代码：

// 等待DOM加载完成再执行代码
$(document).ready(function() {
  // 给services映射里的所有area绑定悬停事件
  $('map[name="services"] area').hover(
    // 鼠标划入时：显示对应div
    function() {
      const targetId = $(this).attr('item');
      $('#' + targetId).removeClass('hide');
    },
    // 鼠标划出时：隐藏对应div
    function() {
      const targetId = $(this).attr('item');
      $('#' + targetId).addClass('hide');
    }
  );
});

补充优化建议

先确保.hide类的CSS样式正确，默认隐藏元素：

.hide {
  display: none;
  /* 如果需要保留元素占位空间，可以换成 visibility: hidden; */
}

如果想让显示/隐藏的过渡更平滑，可以调整CSS，用过渡动画替代直接的display切换：

/* 给所有这类展示div加个通用类，比如.service-tooltip */
.service-tooltip {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.service-tooltip.show {
  opacity: 1;
  visibility: visible;
}

对应的jQuery代码就改成移除.hide换成添加.show（或者直接切换类），不过你的原始方案完全可以正常工作，这只是提升交互体验的小优化。