Jquery Hover Problema

Question

Tengo un elemento que tiene un método de desplazamiento asociado, y cuando pasas el mouse muestra otro div encima ... desafortunadamente, una vez que se muestra el div superior, rehace las acciones (ya que le agregué la misma clase) para realmente quedarse)

$(document).ready(function(){

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

Y entonces tengo un <div class="cartHover"> que al pasar el mouse muestra <div id="uniquename4" class="cartHover"> pero hace el fadeIn dos veces. Ayuda por favor!

Answer 1

Entonces, ¿no sería mejor tener:

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

Si no desea que la señal de animación se acumule sobre usted, también deberá incluir un .stop ():

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

Answer 3

Respuesta simple. Mira lo que estás haciendo aquí. Tienes dos divs con la clase, cartHover. Entonces, al pasar el primer div, se muestra # uniquename4. Una vez que se muestra uniquename4, si lo pasa, se desvanecerá nuevamente. Todo tiene que ver con su selector, está vinculando el evento de desplazamiento a todas las instancias de elementos con la clase cartHover: esta selección incluye tanto el div que está visible de forma predeterminada como # uniquename4 que se muestra en el desplazamiento. Sugeriría algo como:

<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();
         }
     );
});