CODEWITHSUNDEEP
jqueryhover
Ankur
Ankur

Reputation: 51108

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

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

Upvotes: 1

Views: 3257

Answers (3)

Bruce
Bruce

Reputation: 8430

.hover only takes two function parameters; try this:

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

Upvotes: 0

Dan Breen
Dan Breen

Reputation: 12934

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

Upvotes: 5

Keith Bentrup
Keith Bentrup

Reputation: 11995

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

Upvotes: 0

Related Questions