菜單懸停狀態丟失！

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