Mouseleave jQuery事件将删除单击效果

Question

好吧，我有一个标签页，点击一个标签，我显示一个特定的部分，并将此标签突出显示为红色背景。现在我想使用悬停效果，并在悬停选项卡时应突出显示为红色背景。它可以工作但是当我从点击的标签上鼠标移动时，背景效果会消失。

简而言之，如何在悬停this fiddle

时将标签突出显示为红色背景

Answer 1

为什么不为此使用一些纯粹的CSS：

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

Updated Fiddle

修改

如果您尝试使用jQuery（作为学习经验），我会定义一个名为hoverRed的新css类

.hoverRed { background-color: red; }

然后使用悬停功能：

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

第一个函数在悬停开始时被调用，第二个函数在悬停结束时被调用（并且鼠标离开）

updated fiddle

Answer 2

使用此：

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

<强>更新： 这是您的mouseenter和mouseleave事件的fiddle。这是我添加的代码。

CSS

.lihover{background: red;}

的jQuery

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