Jquery悬停问题

Question

我有一个项目附有悬停方法，当你悬停它时会在它上面显示另一个div ...不幸的是，一旦上面的div显示它重做动作（因为我为它添加了相同的类）实际上坚持下去）

$(document).ready(function(){

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

所以我有一个<div class="cartHover">，在悬停时显示<div id="uniquename4" class="cartHover">，但它会执行两次fadeIn。求救！

Answer 1

所以不要更好：

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

如果您不希望动画提示叠加在您身上，您还需要在其中包含.stop（）：

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

Answer 3

简单的回答。看看你在这做什么。你有这个班的两个div，cartHover。因此，悬停第一个div会导致＃uniquename4显示。一旦显示了uniquename4，如果你将它悬停，它将再次淡入淡出。这一切都与您的选择器有关，您使用类cartHover将悬停事件绑定到所有元素实例 - 此选择包括默认可见的div和悬停时显示的＃uniquename4。我会建议像：

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