Question

我有一个div，里面有一个嵌套元素，显示在鼠标悬停时。这有效。

在mouseout上，嵌套元素应该隐藏，但它会立即淡入，就好像我刚刚在初始div上执行了一样。

我做了a jsfiddle replicating the issue over here。

html是：

<div class="add_bag_large_wrap">

<div class="add_bag_large_droid" style="margin: 90px auto;">
        I am a button.
    <div class="add_includes">
        <p>Show on hover, hide on mouseout</p>

    </div>
</div>

JS：

 $('.add_bag_large_droid').live('hover',function(){

     $(this).children('.add_includes').fadeIn();         

 }).mouseout(function(){

     $('.add_includes').fadeOut();

 });

CSS：

.add_bag_large_wrap {
position: relative;
width: 390px;
height: 96px;
margin: 36px auto;
}

.add_bag_large_droid {
background: #ccc;
width: 390px;
height: 96px;
cursor: pointer;
background-size: 390px 192px;
position: static;
}

.add_includes {
background: #000; padding: 18px; color: #fff; position: absolute; 
bottom: 110px; left: 50%; margin-left: -148px;
display: none;
text-align: left;
}

.add_includes p {
font-size: 11px; color: #fff; margin: 0;
}

是什么导致了这种行为？

Answer 1

也改变你的JS代码：

 $('.add_bag_large_droid').hover(function(){
     $(this).find('.add_includes').fadeIn();         
 }, function(){
     $(this).find('.add_includes').fadeOut();
 });

使用live()：

$('.add_bag_large_droid').live({
    mouseover: function() {
        $(this).find('.add_includes').fadeIn();  
    },
    mouseout: function() {
        $(this).find('.add_includes').fadeOut();
    }
});

Answer 2

试试这个

$('.add_bag_large_droid').hover(function(){

     $(this).children('.add_includes').fadeIn();         

 },function(){

     $('.add_includes').fadeOut();

 });

Answer 3

如果您最初加载DOM时.add_bag_large_droid元素不存在，您希望使用delegate委派您的活动，而不是live：

$('.add_bag_large_wrap').delegate('add_bag_large_droid',{
    'mouseover': function(){
        $(this).children('.add_includes').fadeIn();         
    },
    'mouseout': function(){
        $('.add_includes').fadeOut();
    }
});

$('.add_bag_large_wrap')表示在DOM加载时保证存在的最近祖先。如果它是另一个元素，请更改选择器。

Answer 4

试试这段代码......

$('.add_bag_large_droid').mouseover(function(){

     $(this).children('.add_includes').fadeIn();         

 });

 $('.add_bag_large_droid').mouseout(function(){

     $('.add_includes').fadeOut();

 });

Answer 5

$('.add_bag_large_droid').hover(
    function() {
         $(this).children('.add_includes').fadeIn();
    },
    function() {
         $('.add_includes').fadeOut();
    }
);

这应该可行，你可以用hover（）绑定mouseenter和mouseleave事件，上面的内容与下面相同：

$(selector).mouseenter(handlerIn).mouseleave(handlerOut);

你也可以使用：

$(selector).mouseover(handlerIn).mouseout(handlerOut);

Answer 6

使用最新版本的jquery，它应该是：

$(".add_bag_large_droid").on({
  mouseenter: function(){
         $(this).children('.add_includes').fadeIn();  
  },
  mouseleave: function(){
         $(this).children('.add_includes').fadeOut();  
  }});

但你设置了jquery版本1.6.4：在这种情况下，脚本将是相同的，但使用live而不是on。

代码：http://jsfiddle.net/jSStY/4/

为什么我的mouseout fadeOut工作，但然后再次淡入？

6 个答案: