Mouseover/Mausout, Mouseenter/Mouseleave, schwebende Problem

Question

Ich habe ein Div mit einem Bild darin. Wenn ich das Bild bewahre, erstelle ich ein Tooltip -Div, das absolut über einen Teil des Bildes positioniert ist (die absolute Position ist wichtig). Es enthält den Titel und den Alt -Text.

Das ist alles gut und gut, bis Sie die Tooltip -Box schweben. Es sprudelt nicht nieder und glaubt, dass ich nicht mehr über dem Bild schwebe und so die Tooltip -Box verschwindet. Aber dann registriert ich, dass ich das Bild wieder schwebe und es hin und her geht, da es die Tooltip -Box zeigt und es versteckt.

So das flackernde Problem.

Es gibt eine Reihe von Beiträgen über das flackernde Problem, und ich habe so viele Lösungen ausprobiert, aber keine hat gearbeitet. Ich habe Mausover/Mouseout, Mouseenter/Mouseleave, Hover und sogar Live () in Kombination mit ihnen ausprobiert. Ich habe sogar das Erstellen des Tooltip von Grund auf den leeren DIV umgeschaltet, damit er im DOM geladen wurde, wenn die Seite geladen wurde, falls dies das Problem war. Ich weiß wirklich nicht mehr, was ich tun soll. Hier ist im Moment mein Code.

$("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();
});

Answer 1

Das Problem ist a) Sie müssen Mouseenter / Mouseleave verwenden und b) das Tooltip -Div muss in dem Element leben, in dem die Mausenter / Mouseleave -Hörer verfügen.

z.B:

<div id="mouseoverdiv">
<div class="tooltip">some text</div>
<img src="" />
</div>