0

内部に画像を含む div があります。画像にカーソルを合わせると、画像の一部の上に絶対配置されるツールチップ div を作成します (絶対位置が重要です)。タイトルと代替テキストが含まれています。

ツールチップ ボックスにカーソルを合わせるまでは、これで問題ありません。バブルダウンせず、画像の上にカーソルを置いていないと見なされるため、ツールチップ ボックスが消えます。しかし、その後、画像を再びホバリングしていると登録され、ツールチップボックスの表示と非表示の間を行ったり来たりします。

したがって、ちらつきの問題。

ちらつきの問題についてSOにはたくさんの投稿があり、私は非常に多くの解決策を試しましたが、どれも機能していません。Mouseover/mouseout、mouseenter/mouseleave、hover、さらには live() を組み合わせて使用​​してみました。ツールチップをゼロから作成することから、そこに空の div を作成することに切り替えたので、問題が発生した場合にページが読み込まれたときに DOM に配置されます。私は本当にもう何をすべきかわかりません。これが現時点での私のコードです。

$("img").bind("mouseover", function() {
    var pimg = $(this);
    var position = pimg.position();
    var top = position.top;
    var left = position.left;
    var title = $(this).attr('title');
    var alt = $(this).attr('alt');
    $('.toolTip').css({'left' : left, 'top' : top, 'width' : width}).append('<div><h3>' + title + '</h3><p>' + alt + '</p></div>');
});

$("img").bind("mouseout", function() {
    $('.toolTip').empty();
});
4

1 に答える 1

1

問題は、a) mouseenter / mouseleave を使用する必要があることと、b) tooltip div が mouseenter / mouseleave リスナーを持つ要素内に存在する必要があることです。

例えば：

<div id="mouseoverdiv">
<div class="tooltip">some text</div>
<img src="" />
</div>
于 2011-09-06T22:47:46.370 に答える