javascript - Mouseleave jQuery事件将删除单击效果

好的，我有一个选项卡式页面，单击选项卡时，我将显示一个特定的部分并将该选项卡突出显示为红色背景。现在，我要使用悬停效果，在悬停时，选项卡应突出显示为红色背景。它可以工作，但是当我从单击的选项卡上鼠标离开时，背景效果消失了。

简而言之，如何将this fiddle的标签突出显示为悬停时的红色背景

最佳答案

为什么不为此使用一些纯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