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

Answer 1

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

Answer 2

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.