jQuery on hover with multiple function() calls is not working as I expected

Question

Hi I a trying to do the following:

onMouseOver I want to: 1. remove the existing class (navLinkTD) which provides a black border around the table. 2. Add a new class (navLinkTDActive) which provides a border around the top, left and right but has a background image which changes the border on the bottom to have a small arrow.

Once the mouse has left the active region I want to: 3. I want to remove the navLinkTDActive class 4. I want to re-add the navLinkTD class

What is happening is that onMouseOver/hover all styling is removed. Once I remove the cursor from the active region then the navLinkTDActive class appears.

Here is the section of code causing the issue :-

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

Answer 1

Your only need 2 functions. One for over and one for out. Combine them.

Answer 2

You're passing 4 arguments to the hover function, where it only accepts 2. Try rearranging the code as following:

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

Since jquery supports chaining you can optionally reduce the statements to ones such as:

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

Answer 3

.hover only takes two function parameters; try this:

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