鼠标 hover 上的弹出文本超过 svg 元素，当您将鼠标移出时不会删除

Question

当我将 hover 移到 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>

Answer 1

您正在嵌套弹出窗口。

此外，svg 不是圆形而是方形，因此您需要查看圆形元素

注意：您需要更多代码以允许弹出窗口在将鼠标悬停在其上时保留

 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>

这是一个更简单的版本

注意指针事件：无； - 如果你需要点击弹出窗口，那将不起作用

 const svgElement = document.getElementById('circle'); const popup = document.getElementById('popup'); svgElement.addEventListener('mouseenter', () => popup.hidden = false); svgElement.addEventListener('mouseleave', () => popup.hidden = true);

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

 <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> <div id="popup" hidden>This is a pop-up comment</div>