CODEWITHSUNDEEP
jquery
AppleTattooGuy
AppleTattooGuy

Reputation: 1175

jQuery addClass keeping class there

So I have some jQuery that slides down a menu, I had to do add class for hover when I am hovering over the slid down DIV I need the hover effect to stay active on the menu item.

The problem is that it just stays there even when the DIV has disappeared - I have tried to use removeClass but then it removes it as soon as I scroll onto the menu options DIV.

I have JsFiddle at http://jsfiddle.net/pCTXq/3/

the jQuery is below

$(document).ready(function() {
    $(".menu_item, .menu_options").hover(function() {
    $(this).addClass('hover');
        $(".menu_options").stop(true, true).slideDown(400);
    }, function() {
        $(".menu_options").stop(true, true).delay(10).slideUp(400);
    });

});

I had a look at post jquery hover().addClass() problem but that didn't seem to help much

Thanks in advance for your help.

EDIT. Just noticed also that on the JSfiddle it seems to be adding the hover class to menu_options also - this is not the case when I test the actual script in the browser

Upvotes: 3

Views: 438

Answers (2)

What have you tried
What have you tried

Reputation: 11148

Edit:

See this fiddle for updated answer

You need to remove the class off hover, if I've understood your question correctly:

$(document).ready(function() {
    $(".menu_item, .menu_options").hover(function() {
    $(this).addClass('hover');
        $(".menu_options").stop(true, true).slideDown(400);
    }, function() {
        $(this).removeClass('hover');
        $(".menu_options").stop(true, true).delay(10).slideUp(400);
    });
    
});

Upvotes: 2

Scott Mermelstein
Scott Mermelstein

Reputation: 15397

Take advantage of the second parameter to slideUp. When it completes, remove the class then. Something like this:

$(document).ready(function() {
    $(".menu_item, .menu_options").hover(function() {
        $(this).addClass('hover');
        $(".menu_options").stop(true, true).slideDown(400);
    }, function() {
        $(".menu_options").stop(true, true).delay(10).slideUp(400, function( {
            $(".menu_item, .menu_options").removeClass('hover')
        });
    });
}

Saved in your fiddle at http://jsfiddle.net/pCTXq/9/

So, basically, add the hover class on hover (or mouseenter is actually more appropriate), and don't remove it till you finish scrolling up. You may need to tweak what this is added to (from the looks of it, just $(".menu_item") may do it), but that's the general idea.

Upvotes: 1

Related Questions