如何实现RV旅居应用两图标hover分别弹出地图、配套设施图功能

你原来的代码仅绑定了一组触发元素和弹出元素，新增第二组元素和对应事件绑定即可实现两个悬浮功能同时生效，修改后的完整代码如下：

<!DOCTYPE HTML>
<html>
<head>
 <meta charset="utf-8">
 <title>Image hover demo</title>
 <style>
  /* 通用弹出图片样式，所有悬浮弹出的图片共用 */
  .popup-img{
    position: fixed;
    right:0;
    top:0;
    display: none;
  }
  </style>
  </head>
<body>
<!-- 第一组：谷歌地图图标 + 对应州地图弹出层 -->
<img id="gmapBtn" src="http://fbook123.com/smf/images/gmap.png" alt="谷歌地图图标" />
<img id="mapPopup" class="popup-img" src="http://fbook123.com/smf/images/hidencovemap.png" alt="房车公园所在州地图" />

<!-- 第二组：配套设施按钮 + 对应实拍图弹出层 -->
<img id="amenityBtn" src="替换为你的配套设施按钮图标地址" alt="配套设施按钮" />
<img id="amenityPopup" class="popup-img" src="替换为你的配套设施实拍图地址" alt="配套设施实拍图" />

<script>
  // 第一组事件绑定：谷歌地图图标悬浮展示州地图
  var gmapBtn = document.getElementById("gmapBtn"),
      mapPopup = document.getElementById("mapPopup");
  gmapBtn.onmouseover = function(){
    mapPopup.style.display = "block";
  }
  gmapBtn.onmouseout = function(){
    mapPopup.style.display = "none";
  }

  // 第二组事件绑定：配套设施按钮悬浮展示实拍图
  var amenityBtn = document.getElementById("amenityBtn"),
      amenityPopup = document.getElementById("amenityPopup");
  amenityBtn.onmouseover = function(){
    amenityPopup.style.display = "block";
  }
  amenityBtn.onmouseout = function(){
    amenityPopup.style.display = "none";
  }
</script>
</body>
</html>

关键调整说明 #

• 新增.popup-img通用样式类，所有弹出图片复用该规则，避免重复编码
• 新增了配套设施触发按钮、配套设施实拍弹出层两个DOM元素，替换代码中对应的图片地址即可正常使用
• 单独为第二组元素绑定鼠标悬浮、移出事件，两个功能的触发逻辑完全独立，不会互相冲突

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