鼠标悬停SVG元素弹出的Popup文本移开鼠标后未消失求助

你代码里的问题出在两点：

1. HTML里已经提前写了一个空的<div class="popup"></div>，但每次鼠标悬停SVG时，JS又会新建一个带.popup类的div，导致页面上同时存在多个.popup元素
2. 鼠标移出时，document.querySelector('.popup')只会选中第一个匹配的元素（也就是你一开始写的空div），新创建的那个带文本的弹窗根本没被移除，所以文本会留在页面上

另外，不存在mouseremove这个事件，mouseout是正确的事件名。

推荐两种修复方式，选一种即可：

方式一：复用已有的弹窗（更高效） #

不需要每次创建新元素，直接用HTML里已有的弹窗，通过控制内容和显示状态实现：

const svgElement = document.querySelector('.svaly');
const popup = document.querySelector('.popup'); // 直接获取已有的弹窗

svgElement.addEventListener('mouseover', function() {
  popup.innerHTML = 'This is a pop-up comment';
  popup.style.display = 'block'; // 显示弹窗
});

svgElement.addEventListener('mouseout', function() {
  popup.style.display = 'none'; // 隐藏弹窗
});

对应的CSS需要添加默认隐藏样式：

.popup {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  color: black;
  border: 1px solid black;
  padding: 20px;
  width: 200px;
  display: none; /* 默认隐藏弹窗 */
}

HTML保持不变即可。

方式二：动态创建并正确移除弹窗 #

如果一定要动态创建元素，需要保存弹窗的引用，确保移除时能找到正确的目标：

const svgElement = document.querySelector('.svaly');
let popup = null; // 保存弹窗引用

svgElement.addEventListener('mouseover', function() {
  // 避免重复创建弹窗
  if (!popup) {
    popup = document.createElement('div');
    popup.classList.add('popup');
    document.body.appendChild(popup);
  }
  popup.innerHTML = 'This is a pop-up comment';
});

svgElement.addEventListener('mouseout', function() {
  if (popup && popup.parentNode) {
    document.body.removeChild(popup);
    popup = null; // 清空引用，避免后续异常
  }
});

这种情况下，建议删除HTML里的<div class="popup"></div>，避免干扰。

如果弹窗挡住SVG导致鼠标移出事件异常，可以给弹窗添加pointer-events: none;，让鼠标事件穿透弹窗：

.popup {
  /* 原有样式 */
  pointer-events: none;
}

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