Menu hover state lost!

Question

I like my menu to be interaction on :hover.

So here is the code:

$('#menu img').hover(function (){
    $(this).removeClass();
    $(this).addClass('menuon');
    return false;
}, function(){
    $(this).removeClass();
    $(this).addClass('menuoff');
    return false;
});

This code works fine, but the side effect is when the menuon state is over, it looses it class and become off.

On do you handle that.... I like the on state to stay on!

Here is the working page

Answer 1

Like meder said, you need to specify the class to remove. I wouldn't have an alternate class for an off state. All you need is:

$('#menu img').hover(function (){
    $(this).addClass('menuon');
    return false;
}, function(){
    $(this).removeClass('menuon');
    return false;
});

Answer 2

I have try that :

$('#menu img').hover(function (){
if ($(this).is('.menuoff')){$(this).addClass('menuon');} 
return false;},
function(){
$(this).removeClass('menuon'); 
return false;});

but he callback remove it whatever is was on or off ! any idea ?

Answer 3

You can do what you want by removing the current menu item from the hover events:

$('#menu img:not(.menuon)').hover(
...

BUT you are mixing the current menu item style with the hover style, and I think that this is confusing to the user.

It will probable look better if you only apply the hover styles with javascript and add a currentMenu class to style the current menu entry slightly different from the menuon style.

<img src="layout/menu_acceuil.jpg" class="currentMenu" /> 
<img src="layout/menu_pourquoi.jpg" /> 
...

Answer 4

If you inspect the dom, you'll see that both menuoff and menuon are being added. Instead you should explicity remove the classes instead:

$('#menu img').hover(function (){
    $(this).removeClass('menuoff');
    $(this).addClass('menuon');
    return false;
}, function(){
    $(this).removeClass('menuon');
    $(this).addClass('menuoff');
    return false;
});