0

我有一些用 json 字符串中的数据创建的 div。其中大部分是图像。在那些动态加载的图像上，并希望在鼠标悬停时显示 div 并在鼠标移出时隐藏。因此我使用了直播功能，在论坛上找到了它。鼠标悬停功能有效，但不会鼠标移出。因此，当我将鼠标悬停在一张图像上时，会显示 div，但是当我将鼠标移出时，div 仍然可见。对此有何建议？

我的代码

<script type="text/javascript">
    $('.product').live("hover", function() {
        $(this).find('.product').stop(false,true); // get the image where hovering
        $(this).find('div.caption').stop(false,true).fadeIn(100); // and fade in
    },
     function() {
        $(this).find('.product').stop(false,true); // on mouse leave hide it  
        $(this).find('div.caption').stop(false,true).fadeOut(100); // fade out
     });
</script>

更新的答案 感谢下面的帮助，我找到了解决方案。

$(".productsGrid .product").live("mouseenter", function() {$(this).find('.product').stop(false,true);
$(this).find('div.caption').stop(false,true).fadeIn(100);})
$(".productsGrid .product").live("mouseleave", function() { $(this).find('.product').stop(false,true);   
$(this).find('div.caption').stop(false,true).fadeOut(100);});
4

1 回答 1

2

问题是live它只接受一个函数参数，而不是hover函数那样的 2 个。使用hoverwithlive基本上只是将一个函数绑定到mouseenterand mouseleave。

您可以在此处查看解释和解决方案。

但是，除非您使用的是 1.7 之前的 jquery 版本，否则您不应该使用live它，因为它已被弃用。您应该改用on.

您的代码将如下所示：

$(STATIC ANCESTOR).on({ 
        mouseenter: 
           function() 
           { 

           }, 
        mouseleave: 
           function() 
           { 

           } 
       }, ".product"
    );

WhereSTATIC ANCESTOR被替换.product为未动态加载的元素的祖先元素。如果需要document可以使用，但只能作为最后的手段使用。

于 2012-09-28T21:08:55.637 回答