jQuery.hover无法正常工作

时间:2013-11-03 09:33:44

标签: javascript jquery

我有一个非常简单的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上时,不会调用OnBannerHoverOnBannerOut侦听器。

PS:可能需要注意的是,覆盖100%区域的div内部是一张桌子。

3 个答案:

答案 0 :(得分:1)

与api.jquery.com的示例一样,您需要使用逗号分隔您的处理程序:

$( selector ).hover( handlerIn, handlerOut )

所以试试:

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

答案 1 :(得分:0)

也许尝试类似的事情:

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

答案 2 :(得分:0)

如果这不是拼写错误

$("#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");
});