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个参数传递给hover函数，它只接受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"); }
        );

使用多个function（）调用悬停的jQuery无法正常工作

3 个答案: