Question

这两个.hover(function() {...}, function() {...})都使用元素ID或this工作：

$( "#imgPostTravel" ).hover(function() {
        $('#imgPostTravel').addClass('popout_image');
        $('#imgPostTravel').addClass('shadow');
    }, function() {
        $('#imgPostTravel').removeClass('popout_image');
        $('#imgPostTravel').removeClass('shadow');
});

$( "#imgPostTravel" ).hover(function() {
        $(this).addClass('popout_image');
        $(this).addClass('shadow');
    }, function() {
        $(this).removeClass('popout_image');
        $(this).removeClass('shadow');
});

...而使用.on( "hover", function() {...}：

$( "#imgPostTravel" ).on( "hover", function() {
        $('#imgPostTravel').addClass('popout_image');
        $('#imgPostTravel').addClass('shadow');
    }, function() {
        $('#imgPostTravel').removeClass('popout_image');
        $('#imgPostTravel').removeClass('shadow');
});

......没有。

为什么不呢？

Answer 1

那是因为hover不是事件名称。在jQuery 1.9之前，库支持使用此名称，如“附加说明 here中所述：

在jQuery 1.8中不推荐使用，在1.9中删除：名称“hover”用作字符串“mouseenter mouseleave”的简写。它为这两个事件附加单个事件处理程序，并且处理程序必须检查event.type以确定事件是mouseenter还是mouseleave。不要将“hover”伪事件名称与.hover（）方法混淆，后者接受一个或两个函数。

由于它不是标准的事件名称，而且曾经存在的“特殊案例支持”已经消失，它根本不起作用......

Answer 2

我猜您正在使用on方法，因为您正在动态添加元素。

尝试以下方法：

$(document).on( "mouseenter", "#imgPostTravel", function() {
    $('#imgPostTravel').addClass('popout_image');
    $('#imgPostTravel').addClass('shadow');
}, function() {
    $('#imgPostTravel').removeClass('popout_image');
    $('#imgPostTravel').removeClass('shadow');
});

document实际上应该是imgPostTravel元素最接近的非动态生成父级。

<强>更新

正如其他答案所指出的那样，hover不应该被使用，而mouseover或mouseenter（取决于所需的功能）应该被使用。< / p>

为什么＆＃34; .on（<event>，function（））＆＃34; jQuery事件处理程序的样式不适用于＆＃34; hover＆＃34;？

2 个答案: