Question

我正在使用以下代码进行悬停。但此代码不适用于ajaxload。

<script type="text/javascript">
jQuery(document).ready(function(){
    jQuery('.products-grid .item').hover(function(){ 
        jQuery(this).find('.pro-review').animate({bottom:'0'}, 200);
        jQuery(this).find('.pro-view').show();
    }, function(){  
        jQuery(this).find('.pro-review').stop(true,true).animate({bottom:'-37'}, 200);
        jQuery(this).find('.pro-view').hide();
    });
)};
</script>

我发现这是替代

<script type="text/javascript">
        jQuery(document).on("hover",".products-grid .item", function () {
            jQuery(this).find('.pro-review').animate({bottom:'0'}, 200);
            jQuery(this).find('.pro-view').show();
        });

</script>

但我没有找到如何解决第二个功能。

, function(){  
        jQuery(this).find('.pro-review').stop(true,true).animate({bottom:'-37'}, 200);
        jQuery(this).find('.pro-view').hide();
    });

如何将.on("hover",".products-grid .item", function ()之类的东西与我用于第一个函数的第二个函数关联起来

Answer 1

'hover'实际上并不是它自己的事件，而是shorthand for 2 others：

致电$(selector).hover(handlerIn, handlerOut)是：
的简写
 $(selector).mouseenter(handlerIn).mouseleave(handlerOut);

对于委托绑定，您可以直接指定它们：

jQuery(document).on({
    'mouseenter': function(){ 
        jQuery(this).find('.pro-review').animate({bottom:'0'}, 200);
        jQuery(this).find('.pro-view').show();
    },
    'mouseleave': function(){  
        jQuery(this).find('.pro-review').stop(true,true).animate({bottom:'-37'}, 200);
        jQuery(this).find('.pro-view').hide();
    }
}, '.products-grid .item');

Answer 2

您可以使用mouseleave和mouseenter代替hover。

jQuery(document).on("mouseleave",".products-grid .item", function () {
        jQuery(this).find('.pro-review').animate({bottom:'0'}, 200);
        jQuery(this).find('.pro-view').show();
});


jQuery(document).on("mouseenter",".products-grid .item", function () {
        jQuery(this).find('.pro-review').stop(true,true).animate({bottom:'-37'}, 200);
    jQuery(this).find('.pro-view').hide();
});

或者您可以合并mouseenter和mouseleave

$(document).on({
    mouseenter: function () {
         jQuery(this).find('.pro-review').animate({bottom:'0'}, 200);
         jQuery(this).find('.pro-view').show();
    },

    mouseleave: function () {
        jQuery(this).find('.pro-review').stop(true,true).animate({bottom:'-37'}, 200);
        jQuery(this).find('.pro-view').hide();
    }
}, '.products-grid .item');

悬停的javascript不能在ajax加载？

2 个答案: