菜單懸停狀態丟失！

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

如果檢查dom，您會看到menuoff和menuon都被添加了。 相反，您應該顯式刪除這些類：

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

Answer 3

就像meder所說的那樣，您需要指定要刪除的類。 我不會有關閉狀態的替代類。 所有你需要的是：

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