Hover fadeOut jQuery numéro

Question

J'ai une page avec un curseur de 3 images. Si vous passez la souris sur la partie gauche du curseur, une flèche indiquant la direction à gauche apparaît et remplace la souris. Et si vous passez la souris sur la partie droite du curseur, une flèche indiquant la bonne direction apparaît et remplace la souris. Et aussi, ces flèches apparaissent et disparaissent de fond en comble (c'est pourquoi j'utilise jQuery et non la propriété de curseur css). J'ai fait tout cela, mais le problème est que lorsque la souris quitte le curseur seulement de gauche à droite, les flèches ne disparaissent pas jusqu'à ce que vous déplacez la souris dans une autre direction.

Alors, voici mon code, tout d'abord la partie HTML:

<div id="arrow-prev" class="arrow"> 
<img id="cursorimg_prev" src="style/arrow-left.png" /> 
</div> 

<div id="arrow-next" class="arrow"> 
<img id="cursorimg_next" src="style/arrow-right.png" /> 
</div> 

Le CSS:

.arrow 
{ 
height: 585px; 
width: 750px; 
position: absolute; 
top: 0px; 
} 

#arrow-prev 
{ 
left: 0px; 
cursor: none; 
width:50%; 
} 

#arrow-next 
{ 
right: 0px; 
cursor:none; 
width:50%; 
} 

#cursorimg_prev, 
#cursorimg_next 
{ 
position: absolute; 
display: none; 
z-index: 99; 
} 

Et la partie jQuery:

$('#arrow-prev').mousemove(function(event) { 
      var position = $('.slider_conteneur').position(); 
      var x = event.pageX - position.left - 0; 
      var y = event.pageY - position.top - 0; 
      $('#cursorimg_prev').css({ top: y+"px", left: x+"px" }); 
     }); 

     $('#arrow-prev').hover(function() { 
      $('#cursorimg_prev').stop().fadeIn(100); 
     }, function(){ 
      $('#cursorimg_prev').stop().fadeOut(100); 
     }); 

     $('#arrow-next').mousemove(function(event) { 
     var position = $('.slider_conteneur').position(); 
     var position2 = $('#arrow-next').position(); 

     var x = event.pageX - position.left - position2.left; 
     var y = event.pageY - position.top - position2.top; 
     $('#cursorimg_next').css({ top: y+"px", left: x+"px" }); 
     }); 

     $('#arrow-next').hover(function() { 
      $('#cursorimg_next').stop().fadeIn(100); 
     }, function(){ 
      $('#cursorimg_next').stop().fadeOut(100); 
     }); 

quelqu'un Hope peut vous aider!

Answer 1

Je pense que votre erreur est que vous cherchez en utilisant hover sur les divs .arrow, ceux-ci font la moitié de la zone visible chacun. et le hover effekt sera visible jusqu'à ce que votre souris lève la zone des divs

j'ai changé quelques trucs (principalement css pour ajuster la taille des conteneurs, cela peut être fait de plusieurs façons) et téléchargé sur jsfiddle (en remplaçant les images que je n'ai pas avec le texte alt mais cela devrait servir le même but), j'ai aussi enlevé les événements mousemove car ils causaient beaucoup d'erreurs.

J'espère bien compris votre question

http://jsfiddle.net/fESVm/

.arrow 
    { 
    height: 585px; 
    width: 28px; 
    position: absolute; 
    margin-right:182px; 
    top: 0px; 
    }