javascript - jQuery.hover 不工作

Question

我有一段令人惊讶的简单 jQuery 代码，它不能按预期工作。

当我将鼠标悬停在 div 上时，我想更改它的类，并在鼠标离开 div 区域时恢复该类。这是我的代码。

function WireHandlers()
{
    SetBannerHoverImage();
}

function SetBannerHoverImage()
{
    $("#banner").hover( OnBannerHover. OnBannerOut );
}

function OnBannerHover()
{
    $("#banner").removeClass("grayGradiant");
    $("#banner").addClass("redGradiant");
}

function OnBannerOut()
{
    $("#banner").removeClass("redGradiant");
    $("#banner").addClass("grayGradiant");
}

$(document).ready( function() { WireHandlers(); } );

document.ready 确实 call WireHandlers，它确实 call SetBannerHoverImage，它确实成功地调用了该$(selector).hover()方法。

但是，当我将鼠标悬停在 div 上时，不会调用OnBannerHover和OnBannerOut侦听器。

PS：可能需要注意的是，覆盖 100% 区域的 div 内部是一个表格。

Answer 1

就像在 api.jquery.com 的示例中一样，您需要用逗号分隔您的处理程序：

$( selector ).hover( handlerIn, handlerOut )

所以试试：

$("#banner").hover( OnBannerHover, OnBannerOut );

Answer 2

也许尝试类似：

$("#banner").hover(
function(){
$(this).removeClass('red').addClass('grey');
},
function(){
$(this).removeClass('grey').addClass('red');
}
);

Answer 3

如果这不是错字

$("#banner").hover( OnBannerHover. OnBannerOut );

那么应该是

$("#banner").hover( OnBannerHover, OnBannerOut );

或者，您可以使用 (hover只是这些的简写)

$("#banner").on('mouseenter', function(){
    $(this).removeClass("grayGradiant").addClass("redGradiant");
})
.on('mouseleave', function(){
    $(this).removeClass("redGradiant").addClass("grayGradiant");
});