Состояние наведения меню потеряно!

Question

Мне нравится, что мое меню взаимодействует с :hover.

Так вот код:

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

Этот код работает нормально, но побочный эффект - когда состояние menuon заканчивается, оно теряет класс и становится выключенным.

Вы справляетесь с этим .... Мне нравится, когда состояние включено, чтобы остаться!

Вот рабочая страница

Answer 1

Вы можете делать что хотите, удалив текущий пункт меню из событий наведения мыши:

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

НО вы смешиваете текущий стиль пункта меню со стилем наведения, и я думаю, что это сбивает с толку пользователя.

Вероятно, это будет выглядеть лучше, если вы только примените стили наведения при помощи javascript и добавите класс currentMenu, чтобы стиль текущего элемента меню немного отличался от стиля menuon.

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

Answer 2

Если вы осмотрите дом, вы увидите, что меню и меню добавляются. Вместо этого вы должны просто удалить классы:

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

Answer 3

Как сказал медер, вам нужно указать класс для удаления. У меня не было бы альтернативного класса для выключенного состояния. Все, что вам нужно, это:

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