onMouseOut 在锚标记内移动时频繁触发

Question

我有一个锚标记，它同时具有 onMouseOver 和 onMouseOut 事件。目的是显示工具提示。当我将鼠标悬停在锚标记上时，会适当触发 onMouseOver 事件并显示工具提示，但也会触发 onMouseOut 事件并隐藏工具提示。当我将鼠标移到锚链接上时，这两个事件都会非常频繁地触发，本质上使工具提示快速可见和不可见。我希望 onMouseOut 仅在我位于锚标记边界之外时触发。

我认为相关的代码：

HTML：

<ul>
<li>
<a id="1" href="event.php?1" onmouseover="tooltip(this.offsetWidth, this.offsetHeight, this.childNodes, 1)" onmouseout="tooltipHide(1)">Text</a>
<div class="tt">
<div id="tt2" class="tooltip">
...
</div>
</div>
</li>

<li>
<a id="2" href="event.php?2" onmouseover="tooltip(this.offsetWidth, this.offsetHeight, this.childNodes, 2)" onmouseout="tooltipHide(2)">Text</a>
<div class="tt">
<div id="tt2" class="tooltip">
...
</div>
</div>
</li>
</ul>

Javascript：

function tooltipHide(id) {
tt = document.getElementById("tt"+id);
tt.style.display = "none";
}

function tooltip(oW, oH, e, id) {
...
tt = document.getElementById("tt"+id);
tt.style.display = "block";
...
}

Answer 1

只要鼠标进入或移动到被覆盖的项目上，就会触发 onmouseover。您可能希望 onmouseenter 显示工具提示。仅当鼠标穿过元素的边界进入内部时才会触发。

Answer 2

有点疯狂，但问题是当工具提示出现时，它与触发事件的文本重叠。由于某种原因，这导致这两个函数快速来回触发。我通过将工具提示移离文本解决了这个问题。