Mouseover / mouseout, mouseenter / mouseleave, vol stationnaire question vacillante

Question

J'ai un div avec une image à l'intérieur. Quand je passe la souris de l'image, je crée une bulle d'aide thats div en position absolue sur une partie de l'image (la position absolue est importante). Il contient le titre et le texte alt.

Ceci est très bien jusqu'à ce que vous faites passer la boîte de infobulle. Il ne bouillonne pas vers le bas et il pense que je ne suis plus planant au-dessus de l'image, rendant ainsi la boîte de infobulle disapear. Mais il enregistre je en vol stationnaire à nouveau l'image et il va et vient entre montrant la boîte de infobulle et le cacher.

Ainsi, la question vacillante.

Il y a un tas de messages sur SO sur la question vacillante et je l'ai essayé tant de solutions, mais aucune n'a travaillé. J'ai essayé Mouseover / mouseout, mouseenter / mouseleave, vol stationnaire, et même en utilisant en direct () en combinaison avec eux. J'ai même passé de créer l'info-bulle à partir de zéro à avoir la div vide, donc ce serait dans les DOM lorsque la page chargée dans le cas où était le problème. Je ne sais vraiment pas quoi faire. Voici mon code pour le moment.

$("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

Le problème est), vous devez utiliser mouseenter / mouseleave et b) les besoins infobulle div à vivre à l'intérieur de l'élément qui a le MouseEnter / auditeurs MouseLeave.

par exemple:

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