jQuery addClass keeping class there

Question

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

I just whipped this up, but perhaps this is what you are trying to achieve: http://jsfiddle.net/pCTXq/6/ — user1477388, Apr 23 '13 at 15:08

score 2 · Answer 1 · edited Jun 20 '20 at 09:12

2

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

edited Jun 20 '20 at 09:12

Community

1
1

answered Apr 23 '13 at 15:07

What have you tried

11,018
4
31
45

Thanks for the answer - I tried that but what that does is takes the class off as soon as I go into the menu_options div (the slide down one) I need it to stay there whilst I am over that div and remove when coming off – AppleTattooGuy Apr 23 '13 at 15:09
@JamesLeist You're not making sense, to be honest. What div do you want the class on, and when do you want that class removed, exactly? – What have you tried Apr 23 '13 at 15:11
So the menu_item div needs to show the hover and then when I scroll on to menu_options the hover effect needs to stay on menu_item then when I scroll off menu_options the hover needs to disappear - at the moment it stays there – AppleTattooGuy Apr 23 '13 at 15:13
thank you so much for your help but I think I have it now :-) – AppleTattooGuy Apr 23 '13 at 15:18
@JamesLeist See the edit fiddle, still not sure, is that what you want? – What have you tried Apr 23 '13 at 15:21

Scott Mermelstein · Accepted Answer · 2013-04-23T15:19:31.683

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.

jQuery addClass keeping class there

2 Answers2

Edit: