前面讲键盘事件的时候，三个方法覆盖了按键的完整生命周期。鼠标事件也有类似的体系，mouseenter() 就是其中专门用于检测鼠标指针进入元素边界的方法。当用户把光标移动到某个元素上方时，mouseenter 事件立刻触发。
mouseenter() 通常和 mouseleave() 成对使用，一个管进入，一个管离开。这对组合在实现悬停效果、菜单展开、提示框显示等交互时非常常见。
语法形式
触发 mouseenter 事件：
$(selector).mouseenter()
程序化地触发 mouseenter 事件，让已绑定的处理函数执行。
绑定 mouseenter 事件：
$(selector).mouseenter(function(){
// 鼠标进入元素时执行的代码
})
给选中元素绑定鼠标进入事件。这是最常用的写法。
基础示例：鼠标进入标题时显示提示
下面这个例子用 mouseenter() 监听标题元素。当鼠标移入标题区域时，下方显示提示文字，2 秒后自动消失。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>mouseenter() 基础示例</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
<h1 id="mainHeading">将鼠标移入此标题区域</h1>
<div id="hintMsg" style="color:#2471a3;font-weight:bold;"></div>
<script>
$(document).ready(function(){
$("#mainHeading").mouseenter(function(){
$("div").text("鼠标已进入标题区域").show().fadeOut(2000);
});
});
</script>
</body>
</html>
鼠标指针从标题外面滑进标题区域的一瞬间，提示文字出现并渐隐。再从外面滑进来一次，提示又会出现。这个简单的反馈机制在很多场景下都能套用——菜单展开、工具提示、图片预览等。
进阶示例：mouseenter 和 mouseleave 配合使用
下面这个例子更接近日常开发的实际用法。段落元素在鼠标进入时变绿色，鼠标离开时恢复黄颜色，形成悬停高亮效果。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>mouseenter 与 mouseleave 配合示例</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<p style="padding:12px;cursor:pointer;">将鼠标移入和移出这段文字</p>
<script>
$(document).ready(function(){
$("p").mouseenter(function(){
$("p").css("background-color", "#a9dfbf");
});
$("p").mouseleave(function(){
$("p").css("background-color", "#f9e79f");
});
});
</script>
</body>
</html>
这个例子虽然样式简单，但 mouseenter + mouseleave 的组合模式在项目中几乎无处不在——导航菜单的下拉、卡片的浮起效果、按钮的状态切换，背后都是这两个事件在配合工作。
mouseenter 和 mouseover 的区别
这是鼠标事件中比较容易混淆的一对。两者都是在鼠标进入元素时触发，但行为有一个关键差异：事件冒泡的处理方式不同。
-
mouseenter不会冒泡。鼠标从父元素移动到子元素时，父元素的mouseenter不会再次触发。 -
mouseover会冒泡。鼠标从父元素进入子元素时，父元素的mouseover会被触发一次（因为子元素的mouseover冒泡上来了）。
这个差异在包含嵌套结构的元素上表现得很明显。假设一个 div 里面有个 span：
<div id="outer" style="padding:20px;background:#eee;">
<span id="inner" style="padding:10px;background:#ccc;">内层文字</span>
</div>
给外层 div 绑 mouseover，鼠标从 div 移到 span 上时，mouseover 会再触发一次。而绑 mouseenter 的话，只要鼠标没有离开 div 的范围，mouseenter 只会在第一次进入时触发一次。
日常开发中，大多数悬停效果用 mouseenter/mouseleave 就够了，行为更符合直觉，不会有因为嵌套子元素导致的反复触发问题。只有在确实需要利用冒泡机制来做事件委托时才用 mouseover/mouseout。
本节课程知识要点
-
mouseenter()在鼠标指针进入元素边界时触发，通常与mouseleave()成对使用实现悬停效果。 -
mouseenter不会冒泡，鼠标在元素内部移动到子元素上时不会重复触发。 -
与
mouseover的核心区别在于冒泡行为：mouseenter不冒泡，mouseover会冒泡。 -
大多数鼠标悬停交互场景推荐使用
mouseenter/mouseleave组合，逻辑更清晰。 -
配合 CSS 过渡效果使用能实现流畅的悬停状态切换，但涉及样式变化的悬停更推荐直接用 CSS 的
:hover伪类，JS 处理的是需要执行逻辑的场景。
mouseenter() 是鼠标事件体系里负责“进入”环节的方法。它和 mouseleave() 配对使用，构成了经典的鼠标悬停交互模式。理解它和 mouseover 在事件冒泡上的差异，能帮助在开发中做出更合适的选择——简单悬停用 mouseenter，需要事件委托或利用冒泡机制时考虑 mouseover。鼠标事件的方法还在继续，下一篇接着讲 mouseleave()。
