Mouseleave jQuery事件將刪除單擊效果

Question

好的，我有一個標簽頁，點擊一個標簽，我顯示一個特定的部分，並突出顯示該選項卡為紅色背景。 現在我想使用懸停效果，並在懸停選項卡時應突出顯示為紅色背景。 它可以工作但是當我從點擊的標簽上鼠標移動時，背景效果消失了。

簡而言之，如何為這個小提琴突出顯示紅色背景的標簽

Answer 1

為什么不為此使用一些純CSS：

#nav ul li:hover { background-color: red; }

編輯

如果您正在嘗試使用jQuery（作為學習經驗），我將定義一個名為hoverRed的新css類

.hoverRed { background-color: red; }

然后使用懸停功能：

$("#nav ul li").hover(function() {
   $(this).addClass("hoverRed");
}, function() {
   $(this).removeClass("hoverRed");
});

第一個函數在懸停開始時被調用，第二個函數在懸停結束時被調用（並且鼠標離開）

更新小提琴

Answer 2

用這個：

#nav ul li:hover
{
  background: red;  
}

更新：這是有關mouseenter和mouseleave事件的小提琴 。 這是我添加的代碼。

CSS

.lihover{background: red;}

jQuery的

$("li").mouseenter(function(){
  $(this).addClass("lihover");
}).mouseleave(function(){
  $(this).removeClass("lihover");
});