使用多个function()调用悬停的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个参数传递给hover函数,它只接受2.尝试重新排列代码如下:

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

由于jquery支持链接,因此您可以选择将语句缩减为以下内容:

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