javascript 鼠标悬停在svg元素上的弹出文本在U将鼠标移出时未删除

w8biq8rn 于 2023-01-08 发布在 Java

关注(0)|答案(1)|浏览(147)

当我将鼠标悬停在svg元素上时，div会弹出，但当我移开鼠标时，文本仍然在框中。
我尝试将mouseout更改为mouseremove，但没有任何更改

const svgElement = document.querySelector('.svaly');

svgElement.addEventListener('mouseover', function() {
  const popup = document.createElement('div');
  popup.classList.add('popup');
  popup.innerHTML = 'This is a pop-up comment';

  document.body.appendChild(popup);
});

svgElement.addEventListener('mouseout', function() {
  const popup = document.querySelector('.popup');
  document.body.removeChild(popup);
});

.popup {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  color: black;
  border: 1px solid black;
  padding: 20px;
  width: 200px;
}

<svg class="svaly" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="50" />
</svg>
<div class="popup"></div>

JavaScript

来源：https://stackoverflow.com/questions/75028916/popup-text-on-mouse-hover-over-svg-element-not-removing-when-u-put-mouse-out

1条答案

按热度按时间

px9o7tmv1#

您正在嵌套弹出窗口。
另外，svg不是圆形而是方形，因此您需要查看circle元素
注意：您需要更多的代码来使弹出窗口在鼠标悬停在其上时保持不变

const svgElement = document.getElementById('circle');

svgElement.addEventListener('mouseover', function() {
  const popup = document.createElement('div');
  popup.classList.add('popup');
  popup.innerHTML = 'This is a pop-up comment';
  document.body.appendChild(popup);
});

svgElement.addEventListener('mouseout', function() { 
  const popup = document.querySelector('.popup');
  popup.remove()
});

.popup {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  color: black;
  border: 1px solid black;
  padding: 20px;
  width: 200px;
}

<svg class="svaly" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <circle id="circle" cx="50" cy="50" r="50" />
</svg>

这是一个简单的版本
注意指针事件：无;-如果您需要单击弹出窗口，则不会工作
一个一个三个一个一个一个一个一个四个一个一个一个一个一个五个一个

赞(0）回复(0）举报 2023-01-08

我来回答

javascript 鼠标悬停在svg元素上的弹出文本在U将鼠标移出时未删除

1条答案

相关问题

热门标签

最新问答