的jQuery與多功能懸停（）調用不工作如我所料

Question

您好我一個努力做到以下幾點：

的onMouseOver我想： 1.刪除現有的類（navLinkTD），它提供了黑色桌子周圍的邊界。 2.添加一個新的類（navLinkTDActive），它在頂部，左側和右側提供一個邊框，但有一個背景圖像，它可以改變底部的邊框以形成一個小箭頭。

一旦鼠標已經離開活動區域我想： 3.我想刪除navLinkTDActive類 4.我要重新添加navLinkTD類

正在發生的事情是的onMouseOver /懸停所有樣式都被刪除。一旦我從活動區域移除光標，那麼navLinkTDActive類就會出現。

這裏的代碼導致了問題的部分： -

$(".navLinkTD").hover(
     function() { $(this).removeClass("navLinkTD"); },         
     function() { $(this).addClass("navLinkTDActive"); }, 
     function() { $(this).removeClass("navLinkTDActive"); }, 
     function() { $(this).addClass("navLinkTD"); } 
     ); 

Answer 1

你傳遞4個參數的懸停功能，它僅接受2.嘗試重新安排代碼如下：

$(".navLinkTD").hover(
     function() { 
       $(this).removeClass("navLinkTD");                
       $(this).addClass("navLinkTDActive"); 
     }, 
     function() { 
       $(this).removeClass("navLinkTDActive");   
       $(this).addClass("navLinkTD"); 
     } 
); 

因爲jQuery的支持鏈接，你可以選擇減少語句的，如：

$(this).removeClass("navLinkTD").addClass("navLinkTDActive"); 

Answer 2

你只需要2種功能。一個結束，一個結束。結合他們。

Answer 3

.hover只需要兩個函數參數;試試這個：

$(".navLinkTD").hover(
     function() { $(this).removeClass("navLinkTD").addClass("navLinkTDActive"); }, 
     function() { $(this).removeClass("navLinkTDActive").addClass("navLinkTD"); } 
     );