afficher les flèches cliquables sur le dessus d'une photo avec jquery (hover)

Question

J'ai une photo et quand l'utilisateur passe dessus je l'affiche sur le dessus de la photo (en utilisant le positionnement absolu) 2 flèches, une pour aller dans la photo précédente et un pour aller à l'autre. Voici le code à ce jour ...

$('a.large_product_photo').hover(
    function() { 
    $('.arrow').fadeIn(300); 
    }, 
    function() { 
    $('.arrow').fadeOut(300); 
    } 
); 

Le problème est que parce que les flèches sont en haut de la photo quand je mouseOver les flèches de cliquer, ils dissapear parce que le mouseleave de la photo est déclenchée! Que puis-je faire pour résoudre le problème?

Merci d'avance

Answer 1

Une méthode simple et attrayante consiste à utiliser une minuterie. Un mouseout, ou la deuxième fonction() appel de l'événement en vol stationnaire(), définissez un délai d'attente:

timer = setTimeout("$('.arrow').fadeOut(300);", 1000); 

Ensuite, ajoutez un événement mouseover aux flèches:

$('.arrow').mouseover(function(){ 
clearTimeout(timer) 
}); 

Pointage sur la flèche Prenez bien sous 1000ms, de sorte que la minuterie sera effacée. Assurez-vous également d'ajouter un clearTimeout similaire à l'événement mouseover de la photo afin que les flèches ne disparaissent pas si vous quittez la souris et que vous revenez ensuite à nouveau. L'effet net de ceci est que les flèches persistent pendant 1 seconde après avoir éloigné la souris.

Answer 2

Utilisez plutôt mouseover.

$('a.large_product_photo').mouseover(...) 

Answer 3

Merci surréaliste rêves! Le code final pour toute personne intéressée ...

var timer; 
$('a.large_product_photo').hover(
    function() { 
    $('.arrow').fadeIn(300); 
    clearTimeout(timer); 
    }, 
    function() { 
    timer = setTimeout("$('.arrow').fadeOut(300);", 300); 
    } 
); 

$('.arrow').mouseenter(function(){ 
    clearTimeout(timer); 
});