jQuery.hover 不起作用

jQuery.hover not working

本文关键字：不起作用 hover jQuery      更新时间：2023-09-26

我有一段非常简单的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 确实调用了 WireHandlers，它调用了SetBannerHoverImage，它成功地调用了 $(selector).hover() 方法。

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

PS：可能需要注意的是，在覆盖其面积 100% 的div 内部是一个表格。

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

$( selector ).hover( handlerIn, handlerOut )

所以试试：

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

也许可以尝试这样的事情：

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

如果这不是错别字

$("#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");
});
相关文章：