jQuery display box sur le survol et se cacher sur mouseleave

Eh bien, j’essaie de créer une boîte devrait apparaître lorsqu’un lien est survolé,

Bien, j’ai eu la base couverte, mais pour une raison quelconque, je ne pouvais pas accomplir pleinement ce que j’essayais de faire.

comme vous pouvez le voir ici, http://jsfiddle.net/EpV87/1/ (désolé c’est une mauvaise recréation du problème que j’ai)

Ce que j’essaie de faire est de rendre la boîte ( TEST ) visible si HOVER HERE est survolé et la boîte doit être visible si la souris est survolée à l’intérieur.

lorsque la souris est entrée dans TEST , cela fonctionne correctement, cependant, quand il est survolé par un autre object OTHER et un espace vide, il ne fonctionne pas correctement car la zone TEST est toujours visible.

Comment puis-je faire la case TEST masquer si la souris survolait sur AUTRE & espace vide Merci et je suis débutant à jQuery.

Inspiré par cette ancienne réponse :

 var $link = $(".link"); var $box = $("#box"); $link.mouseenter(function() { clearTimeout($box.data('timeoutId')); $box.show(200); }).mouseleave(function() { var timeoutId = setTimeout(function() { $box.hide(200); }, 650); $box.data('timeoutId', timeoutId); }); $box.mouseenter(function() { clearTimeout($box.data('timeoutId')); }).mouseleave(function() { var timeoutId = setTimeout(function() { $box.hide(200); }, 650); $box.data('timeoutId', timeoutId); });

 .link { border: 1px solid red; padding: 10px; } #box { display: none; border: 1px solid red; margin-top: 10px; padding: 10px; }

  Hover me Surprise!

Vous avez manipulé une feuille de souris dans un autre gestionnaire de feuille de souris dans la version que j’ai vérifiée et vous avez eu une faute de frappe dans votre sélecteur $('#abc').mouseleave(function(){... devrait être $('.abc').mouseleave(function(){...

Version que vous avez posté à l’origine

http://jsfiddle.net/EpV87/1/

HTML

 ABC TEST

Javascript

 $('.abc').mouseenter(function(e) { $('#def').show(200); }).mouseleave(function(e){ $('#abc').mouseleave(function(){ $('#def').hide(200); }); });

Solution

http://jsfiddle.net/EpV87/6/

HTML

 ABC TEST

Javascript

 $('.abc') .on("mouseenter", function () { $("#def").show(); }) .on("mouseleave", function () { $("#def").hide(); });

Vous avez besoin d’une autre div pour contenir les deux éléments

  ABC TEST

De cette façon, vous pouvez faire disparaître la div de TEST lorsque la souris quitte la div de conteneur.

 $('.abc').mouseenter(function(e) { $('#def').show(200); }); $('#container').mouseleave(function(e){ $('#def').hide(200); });

Vous pouvez le vérifier ici .