jQuery mouseover/mouseout scintille

Question

je le code HTML suivant

<div class="individual"> 
    <div class="change">change</div> 
    <div class="picture"><img src....></div> 
</div> 

Le .change a position: absolute; et est invisible. Sur mouseover .picture, je veux .change à apparaître, et sur mouseout, pour disparaître. Si l'individu clique sur .change alors quelque chose devrait arriver.

À l'heure actuelle, lorsque la souris passe au-dessus de la modification, elle est traitée comme une souris de l'image, et la modification commence à clignoter!

J'ai alors fait cette jQuery:

$('.change').mouseout(function(){ 
    $('.picture').mouseout(function(){ 
     $(this).parent().children('.change').hide(); 
    }); 
}); 

$('.picture').mouseover(function(){ 
    var i = $(this).parent().children('.change').show(); 
}); 

Cela fonctionne bien que la première fois! Si je déplace l'image, puis quand je reviens, et que je change, tout commence à clignoter !! Que fais-je?!

Merci

Answer 1

Utilisez 'mouseenter' au lieu de 'mouseover' et 'mouseleave' au lieu de 'mouseout'

$('.picture').mouseenter(function(){ 
    $(this).parent().children('.change').hide(); 
}); 



$('.picture').mouseleave(function(){ 
    var i = $(this).parent().children('.change').show(); 
}); 

Answer 2

Le problème est que cache .change se déplace l'élément .picture à l'endroit où .change l'habitude d'être. Cela déclenchera à la fois .mouseover() et .mouseenter() donc il n'y a aucun point à remplacer.

Vous devez modifier le positionnement CSS absolu pour les deux éléments pour enlever .change ne se déplaceront pas .picture

Answer 3

J'ai toujours trouvé mouseout et mouseover être plutôt buggy. Je ne sais pas pourquoi, vous pouvez essayer:

$(function() { 
    $('.picture').hover(function() { 
     $('.change').show(); 
    },function() { $('.change').hide(); }); 
}); 

Tant que l'apparition de « .Modification » ne bouge pas « .Picture », provoquant le vol stationnaire à être rompu, cela devrait fonctionner pour vous.