前面分别讲了 mouseenter() 和 mouseleave()，每次实现悬停效果都要写两个方法，代码上有点分散。jQuery 提供了一个更便捷的封装——hover() 方法，把进入和离开两个事件的处理逻辑合并到一次调用里。
hover() 本质上就是 mouseenter 和 mouseleave 的语法糖。它接受两个函数参数：第一个在鼠标进入时执行，第二个在鼠标离开时执行。如果只传一个函数，那进入和离开都会触发同一个函数。这种设计在开发中很方便，大部分悬停交互用 hover() 一行就能写清楚，不用分两行分别绑定。
语法形式
$(selector).hover(inFunction, outFunction)
inFunction（必填）： 鼠标进入元素时执行的回调函数，对应 mouseenter 事件。
outFunction（可选）： 鼠标离开元素时执行的回调函数，对应 mouseleave 事件。如果不传这个参数，进入和离开都会执行 inFunction。
基础示例：悬停切换背景颜色
下面这个例子用 hover() 实现了段落背景色的悬停切换。鼠标移入变紫色，移出变绿色。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hover() 基础示例</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p style="padding:12px;cursor:pointer;font-weight:bold;">将鼠标悬停在这段文字上</p>
<script>
$(document).ready(function(){
$("p").hover(
function(){
$(this).css("background-color", "#d7bde2");
},
function(){
$(this).css("background-color", "#a9dfbf");
}
);
});
</script>
</body>
</html>
鼠标移入段落，背景变紫色；移出恢复绿色。和之前分别写 mouseenter 加 mouseleave 的效果一样，但代码结构更紧凑。$(this) 在回调里指向触发事件的元素，保证每个悬停操作都精准作用于当前元素。
进阶示例：悬停时添加和移除内容
hover() 不仅能改样式，还能操作 DOM。下面这个例子展示了更综合的用法。列表中普通项悬停时追加一个星号标记，离开时移除；带 fade 类的项悬停时触发渐隐渐显动画。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hover() 进阶示例</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<style>
ul {
margin-left: 20px;
color: #333;
}
li {
cursor: pointer;
padding: 4px 0;
}
.marker {
color: #c0392b;
font-weight: bold;
}
</style>
</head>
<body>
<ul>
<li>jQuery 基础教程</li>
<li>JavaScript 入门</li>
<li class="fade">HTML 与 CSS 布局</li>
<li class="fade">前端框架实践</li>
</ul>
<script>
// 普通列表项：悬停时追加标记，离开时移除
$("li").hover(
function(){
$(this).append($("<span class='marker'> ★ 推荐</span>"));
},
function(){
$(this).find("span.marker:last").remove();
}
);
// 带 fade 类的列表项：悬停时有渐隐渐显动画
$("li.fade").hover(function(){
$(this).fadeOut(100);
$(this).fadeIn(500);
});
</script>
</body>
</html>
这个例子展示了两种不同的悬停处理方式：
普通列表项在进入时尾部追加一个红色星号标记，离开时删掉。find("span.marker:last") 保证只移除自己追加的那个标记，不会误删其他元素。
带 fade 类的列表项只传了一个函数给 hover()，意味着进入和离开都会触发这段逻辑——先快速消失再缓缓显示回来，形成一种闪烁的反馈效果。只传一个参数在需要对称行为的场景下很实用，比如悬停时切换某个开关状态。
hover 和 CSS :hover 该怎么选
经常会遇到一个问题：悬停效果到底用 jQuery 的 hover() 还是直接用 CSS 的 :hover 伪类？
我的判断标准很简单：
-
纯样式变化（颜色、背景、边框、阴影等）→ 优先 CSS
:hover。性能更好，代码更少，不需要 JS 参与。 -
需要操作 DOM（添加删除元素、显示隐藏其他节点）→ 用 jQuery
hover()。 -
需要触发动画或异步请求 → 用 jQuery
hover()。 -
需要悬停延迟或防抖 → 用 jQuery
hover()配合定时器。
CSS 能解决的交给 CSS，CSS 做不了的事才交给 JS。这样代码结构更清晰，维护起来也轻松。
本节课程知识要点
-
hover()是mouseenter和mouseleave的合并封装，一个方法完成悬停进出的完整逻辑。 -
接受两个函数参数：第一个处理鼠标进入，第二个处理鼠标离开。只传一个函数则进出都触发同一个。
-
回调中的
$(this)指向触发事件的元素本身，保证操作精准。 -
可以用来改样式、操作 DOM、触发动画，但纯样式变化仍推荐优先使用 CSS 的
:hover伪类。 -
配合
fadeOut、fadeIn、slideDown、slideUp等效果方法，能实现更流畅的悬停动效。
hover() 把 mouseenter 和 mouseleave 封装到了一起，代码写起来更简洁直观。它和 CSS 的 :hover 伪类各有分工——样式交给 CSS，逻辑和 DOM 操作交给 hover()。悬停交互是前端页面里用户感知很强的细节，掌握好 hover() 的用法和适用边界，能让交互效果写得更顺手、体验更流畅。到这里，鼠标事件的几个核心方法基本都覆盖到了，配合之前讲的键盘事件和表单事件，jQuery 事件体系的基础能力已经比较完整。
