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

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" /> 
...