如何在多个标记悬停时显示弹出窗口

<div class="marker" id="marker1">标记1</div>
<div class="marker" id="marker2">标记2</div>
<div class="marker" id="marker3">标记3</div>

<div class="popup" id="popup1">弹出窗口1</div>
<div class="popup" id="popup2">弹出窗口2</div>
<div class="popup" id="popup3">弹出窗口3</div>

.marker {
  position: relative;
  display: inline-block;
  padding: 5px;
  background-color: #ccc;
  cursor: pointer;
}

.popup {
  position: absolute;
  display: none;
  padding: 10px;
  background-color: #fff;
  border: 1px solid #000;
}

// 获取所有标记元素
var markers = document.getElementsByClassName('marker');

// 遍历标记元素，并为每个元素添加悬停事件监听
for (var i = 0; i < markers.length; i++) {
  markers[i].addEventListener('mouseover', showPopup);
  markers[i].addEventListener('mouseout', hidePopup);
}

// 显示弹出窗口
function showPopup(event) {
  var markerId = event.target.id; // 获取当前标记的唯一标识符
  var popupId = 'popup' + markerId.substr(6); // 根据标记的唯一标识符构造对应的弹出窗口的唯一标识符
  var popup = document.getElementById(popupId); // 获取对应的弹出窗口元素
  popup.style.display = 'block'; // 显示弹出窗口
}

// 隐藏弹出窗口
function hidePopup(event) {
  var markerId = event.target.id; // 获取当前标记的唯一标识符
  var popupId = 'popup' + markerId.substr(6); // 根据标记的唯一标识符构造对应的弹出窗口的唯一标识符
  var popup = document.getElementById(popupId); // 获取对应的弹出窗口元素
  popup.style.display = 'none'; // 隐藏弹出窗口
}