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(){...
ABC TEST
$('.abc').mouseenter(function(e) { $('#def').show(200); }).mouseleave(function(e){ $('#abc').mouseleave(function(){ $('#def').hide(200); }); });
ABC
$('.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 .