JQuery Hover Problème

Question

J'ai un élément qui a une méthode de vol stationnaire qui y est attachée, et quand vous le survolez, il affiche un autre div dessus ... malheureusement une fois que le div supérieur affiche les actions (puisque j'ai ajouté le même classe à coller en fait autour)

$(document).ready(function(){ 

    $(".cartHover").hover(
     function() { 
     $("#uniquename4").fadeIn(); 
     }, 
     function() { 
     $("#uniquename4").fadeOut(); 
     } 
    ); 
    }); 

Et j'ai donc une <div class="cartHover"> que sur les écrans de vol stationnaire <div id="uniquename4" class="cartHover"> mais il fait deux fois la fadeIn. Aidez-moi, s'il vous plaît!

Answer 1

Alors ne serait-il préférable d'avoir:

CSS

<div id="someID" class="cartHover"> 
    <div id="someId" class="showMe"> 
    </div> 
</div> 

<div id="someID" class="cartHover"> 
    <div id="someId" class="showMe"> 
    </div> 
</div> 

jQuery

$(function(){ 
    $('.cartHover').mouseenter(function(){ 
    $(this).find('.showMe').show(); 
    }).mouseleave(function(){ 
    $(this).find('.showMe').hide(); 
    }); 
}); 

Answer 2

de réponse simple. Regardez ce que vous faites ici. Vous avez deux divs avec la classe, cartHover. Donc, en survolant la première div, provoque # uniquename4 à afficher. Une fois que le nom unique4 est affiché, si vous le survolez, il va se faner à nouveau. Tout cela a à voir avec votre sélecteur, vous liez l'événement hover à toutes les instances d'éléments avec la classe cartHover - cette sélection inclut à la fois la div qui est visible par défaut, et # uniquename4 qui est affiché sur hover. Je suggère quelque chose comme:

<div id="showSomething" class="cart-class">Content</div> 
<div id="toBeShown" class="cart-class">Content</div> 

$(document).ready(function() { 
    $('#showSomething').hover(
     function() { 
      $('#toBeShown').fadeIn(); 
     }, 
     function() { 
      $('#toBeShown').fadeOut(); 
     } 
    ); 
}); 

Answer 3

Si vous ne voulez pas la queue d'animation pour empiler sur vous, vous aurez besoin d'inclure un .stop() là aussi:

$(function(){ 
    $('.cartHover').mouseenter(function(){ 
    $(this).find('.showMe').stop().show(); 
    }).mouseleave(function(){ 
    $(this).find('.showMe').stop().hide(); 
    }); 
});