动态内容鼠标悬停

Question

我有一些用 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);});

Answer 1

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

你可以看到解释和解决方案here。

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

您的代码将如下所示：

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

           }, 
        mouseleave: 
           function() 
           { 

           } 
       }, ".product"
    ); 

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