0

我有一个 div，其中有一个嵌套元素，当悬停在 div 上时会显示。这行得通。

在鼠标移出时，嵌套元素应该隐藏，它确实如此，但随后立即再次淡入，就好像我刚刚在初始 div 上执行了悬停一样。

我已经制作了一个 jsfiddle 来复制这里的问题。

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>

​</p>

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

是什么导致了这种行为？

4

6 回答 6

4

也改变你的 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();
    }
});
于 2012-08-17T13:34:38.797 回答
1

尝试这个

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

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

 },function(){

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

 });
 ​
于 2012-08-17T13:44:33.653 回答
0

如果您的.add_bag_large_droid元素在 DOM 最初加载时不存在，您希望使用它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 加载时保证存在的最近的祖先。如果是另一个元素，请更改选择器。

于 2012-08-17T13:37:46.877 回答
0

试试这个代码...

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

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

 });

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

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

 });
于 2012-08-17T13:38:46.627 回答
0 
$('.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);
于 2012-08-17T13:39:56.300 回答
0

使用最新版本的 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/

于 2012-08-17T13:40:37.503 回答