Jquery 悬停问题答案

【问题标题】：Jquery Hover ProblemJquery 悬停问题
【发布时间】：2009-09-16 22:44:43
【问题描述】：

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

$(document).ready(function(){

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

所以我有一个<div class="cartHover">，它在悬停时显示<div id="uniquename4" class="cartHover">，但它会淡入两次。请帮忙！

【问题讨论】：

标签： jquery html hover overlay

【解决方案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();
  });
});

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案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();
         }
     );
});

【讨论】：