Mouseleave jQuery 事件将移除点击效果答案

【问题标题】：Mouseleave jQuery event will remove the click effectMouseleave jQuery 事件将移除点击效果
【发布时间】：2012-01-03 02:26:31
【问题描述】：

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

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

【问题讨论】：

【解决方案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");
});

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

【讨论】：

太好了，我知道，实际上我正在学习 jquery 事件并尝试使用 mouseenter、mouseleave、单击绑定。 jquery 的方式是什么？？
使用 jQuery 会增加复杂性，为什么在 jQuery 中做一些可以在 CSS 中轻松完成的事情？
@EmmanuelN - 我怀疑 OP 只是将其作为一种学习体验，但是，对于生产项目，CSS 会更干净。
亚当这个概念是什么，如果你不介意问的话，一个事件有两个功能。
@Mike - 这并不是一个真正的特殊概念，它只是 jQuery 为您提供的一个函数，它接受两个函数。一个用于悬停开始时，一个用于离开时。查看docs 了解更多信息。

【解决方案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");
});

【讨论】：

为什么要在 jQuery 中使用它，而使用 CSS 可以轻松做到这一点？
好的。如果您想学习比它更好，但这将是在实际站点中使用的更好解决方案。
谢谢 Virendra，我第一次看到一些东西，比如 .mouseleave(function() {$(this).removeClass("lihover")}) this dot[.] 与逗号 [,] 正如亚当所说的那样
我正在使用点 [.] 将多个函数和事件添加到同一个选择器。在亚当的解决方案中，他在同一函数中指定了 2 个事件。对于 hover() 您可以使用 Adam 建议的方法，因为它将其解析为悬停时执行的第一个函数，离开悬停时执行的第二个函数。我正在使用 2 个不同的功能（因为您想使用 mouseleave）来实现相同的功能。
感谢您提供此信息，我可以在您的情况下使用 bind(mouseenter) 和 bind(mouseleave)