Question

我有一些使用json字符串数据创建的div。其中大多数是图像。超过那些动态加载的图像，并希望在鼠标悬停时显示div并在鼠标移出时隐藏。因此我使用了live函数，在论坛上找到它。鼠标悬停功能可以工作但不会鼠标移出。因此，当我将一个图像悬停时，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函数的两个函数参数。将hover与live一起使用基本上只是将一个函数绑定到mouseenter和mouseleave。

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

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

您的代码看起来像这样：

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

           }, 
        mouseleave: 
           function() 
           { 

           } 
       }, ".product"
    );

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

动态内容鼠标过度输出

1 个答案: