0

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";
...
}
4

2 に答える 2

1

onmouseoverは、マウスがオーバーされているアイテムに入る、または移動するたびにトリガーされます。onmouseenter代わりに、ツールチップを表示することをお勧めします。これは、マウスが要素の境界を越えて内部に入ったときにのみトリガーされます。

于 2011-08-18T18:13:22.080 に答える
0

少しおかしなことに、問題は、ツールチップが表示されたときに、イベントをトリガーしたテキストと重なっていたことです。何らかの理由で、これにより両方の関数がすばやく前後にトリガーされました。ツールチップをテキストから遠ざけることで問題を修正しました。

于 2011-08-19T20:56:56.753 に答える