jQuery的 - 要是再卸下類.hover

Question

我有以下的jQuery函數：

$(function(){ 
      if ($(".menu li").hasClass("active")) { 
        $(".active").css("margin-top", "6px"); 
       } 
     }); 

這適用於CSS/jQuery的菜單，當每個菜單項懸停在其擴張和收縮。 onClick事件添加margin-top of 6px以給出按鈕按下的印象。

然後，我使用PHP來檢測用戶正在訪問哪個頁面以將.active類添加到相關菜單項。

問題：.active類應該保留在原地直到用戶將鼠標懸停在不同的菜單項上。此時應從該元素中刪除.active類 - 由於.active類在.hover事件中被重用。

這裏是基本的HTML標記：

<ul id="menu"> 
<li> 
<div class="inner"> 
<div class="button"><img src="images/insightbutton.png" /></div> 
<div class="description">&nbsp;</div> 
</div> 
</li> 
<li> 
<div class="inner"> 
<div class="button"><img src="images/insightbutton.png" /></div> 
<div class="description">&nbsp;</div> 
</div> 
</li> 
</ul> 

我怎能應用於活動菜單項。主動類，但刪除它時.inner懸停？

Answer 1

你可以這樣做：

$(".menu li.active").addclass("onPage"); 
$(".menu li").hover(function() { 
    $(".menu li.active").removeClass("active"); 
    $(this).addClass("active"); 
}, function() { 
    $(this).removeClass("active"); 
    $(".menu li.onPage").addClass("active"); 
}); 

此代碼執行以下操作：

• 將佔位符類分配給原始的active（assig由你的PHP）。
• 在懸停時，從所有<li>兄弟姐妹中刪除active類，並將其懸停爲1至active。
• 離開懸停時，它會從自身中刪除active，並選擇佔位符並將其恢復爲原始位置（它們所在的頁面）。

Answer 2

你可以簡單地選擇具有active類div，並且刪除類：

$('div.inner').hover(function() { 
    $('div.active').removeClass('active'); 
});