javascript - 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