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

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

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

2 个答案: