jquery - 悬停多个函数（）调用的jQuery没有按我预期的那样工作

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");

Answer 2

您只需要 2 个功能。一个结束，一个结束。将它们结合起来。

Answer 3

.hover 只接受两个函数参数；试试这个：

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