jQuery mouse out et ne pas masquer un élément particulier

Question

Disons que j'ai deux éléments: une ancre qui provoque une occurrence d'un div particulier. Dans ce seul cas, je ne suis pas en mesure d'envelopper ces deux dans un conteneur parent, donc le balisage entier doit être comme suit:

<a href="#" class="trigger">click me</a> 
<div class="info">info displayed on trigger hover</a> 

La question fondamentale est: lorsque la laisse la souris sur la gâchette I voulez cacher la fenêtre d'information mais seulement si le curseur n'est pas dessus. Comment puis-je faire cela?

Aide apprécié, concernant

Answer 1

Si vous ne pouvez pas modifier le balisage du tout, vous pouvez lui donner un bel effet de fondu, et tirer profit du fait un fondu n'est pas instantané, quelque chose comme cela gérer tous les .trigger/.info paire:

$(".trigger, .info").hover(function() { 
    $(this).next().andSelf().filter(".info").stop().animate({opacity: 1 }); 
}, function() { 
    $(this).next().andSelf().filter(".info").stop().animate({opacity: 0 }); 
});​​​​​​ 

You can try a demo here, vous pourriez briser cette info une fonction pour .trigger et un pour .info, je juste garder un peu plus laconique. Les deux version fonction regarderait like this:

$(".trigger, .info").hover(function() { 
    $(this).next().stop().animate({opacity: 1 }); 
}, function() { 
    $(this).next().stop().animate({opacity: 0 }); 
}); 
$(".info").hover(function() { 
    $(this).stop().animate({opacity: 1 }); 
}, function() { 
    $(this).stop().animate({opacity: 0 }); 
}); 

Ce que cela fait est en mouseenter il apparaît en fondu, sur mouseleave il disparaît (via .animate()) ... mais en déplaçant la souris de l'un à l'autre laissera le fondu se produire pour 1 trame avant de mettre un .stop() au fondu de sortie et de l'éteindre en retour. Pour l'utilisateur, ils ne voient pas que quelque chose s'est passé, lorsque la souris quitte les deux, le fondu est autorisé à continuer.

Answer 2

$('.trigger').live('mouseout',function (event) { 
    if (!$(event.relatedTarget).is('.info')) 
     $(this).next().hide(); 
});