Question

我有一个非常简单的jQuery代码，它没有按预期工作。

当我将鼠标悬停在div上时，我想更改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确实调用WireHandlers，调用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");
});

jQuery.hover无法正常工作

3 个答案: