jQuery 悬停并调用多个 function() 时未按我的预期工作

Question

您好，我正在尝试执行以下操作:

onMouseOver 我想: 1. 删除现有的类 (navLinkTD)，该类在表格周围提供黑色边框。 2. 添加一个新类 (navLinkTDActive)，它提供顶部、左侧和右侧的边框，但具有背景图像，该背景图像将底部的边框更改为带有小箭头。

一旦鼠标离开事件区域，我想要: 3.我想删除navLinkTDActive类 4.我想重新添加navLinkTD类

发生的情况是 onMouseOver/hover 所有样式都被删除。一旦我从事件区域中删除光标，就会出现 navLinkTDActive 类。

这是导致问题的代码部分:-

$(".navLinkTD").hover(
        function() { $(this).removeClass("navLinkTD"); },                                 
        function() { $(this).addClass("navLinkTDActive"); },
        function() { $(this).removeClass("navLinkTDActive"); },
        function() { $(this).addClass("navLinkTD"); }
        );

Answer 1

您将 4 个参数传递给悬停函数，但它只接受 2 个。请尝试按如下方式重新排列代码:

$(".navLinkTD").hover(
        function() { 
                $(this).removeClass("navLinkTD");                                                              
                $(this).addClass("navLinkTDActive");
        },
        function() {
                $(this).removeClass("navLinkTDActive");        
                $(this).addClass("navLinkTD");
        }
);

由于 jquery 支持链接，您可以选择将语句减少为以下内容:

$(this).removeClass("navLinkTD").addClass("navLinkTDActive");