菜单悬停状态丢失！

Question

我喜欢我的菜单在:hover上进行互动。

所以这里是代码：

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

此代码工作正常，但副作用是当menuon状态已经结束，它失去它课堂，成为关。

关于你处理那个....我喜欢待在状态！

这里是the working page

Answer 1

你可以做你想做的从悬停事件删除当前的菜单项：

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

但你和悬停风格混合当前菜单项的风格，我认为这对用户来说很混乱。

如果您仅将JavaScript悬停样式应用于JavaScript并添加currentMenu类来设置与menuon样式略有不同的当前菜单项，则可能会更好。

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

Answer 2

像MEDER说，你需要指定类删除。我不会有一个关闭状态的替代课程。所有你需要的是：

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

Answer 3

如果你检查dom，你会看到menuoff和menuon都被添加了。相反，你应该明确地删除类：

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