上一篇讲了 mouseenter()，它负责检测鼠标进入元素的时刻。现在来看它的搭档——mouseleave()。当鼠标指针从元素上方移出、离开元素的边界时，mouseleave 事件被触发。
mouseleave() 和 mouseenter() 总是一起出现，一个管“进来”，一个管“出去”。这种成对使用的模式在悬停交互中几乎是标配——鼠标进入时显示下拉菜单或提示框，鼠标离开时把它们隐藏。少了其中任何一个，交互体验就会不完整。
语法形式
触发 mouseleave 事件：
$(selector).mouseleave()
程序化地触发 mouseleave 事件。
绑定 mouseleave 事件：
$(selector).mouseleave(function(){
// 鼠标离开元素时执行的代码
})
给选中元素绑定鼠标离开事件，这是常规用法。
基础示例：鼠标离开标题时显示告别提示
下面这个例子监听标题元素的 mouseleave 事件。当鼠标从标题上移开时，下方显示告别提示，2 秒后自动消失。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>mouseleave() 基础示例</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="leaveMsg" style="color:#c0392b;font-weight:bold;"></div>
<script>
$(document).ready(function(){
$("#mainHeading").mouseleave(function(){
$("div").text("鼠标已离开标题区域").show().fadeOut(2000);
});
});
</script>
</body>
</html>
鼠标移入标题时页面没有反应，但一旦移出，提示文字立刻出现并渐隐。再次移入再移出，提示再次出现。这个触发逻辑和 mouseenter 刚好对称——一个在进入边界时响应，一个在离开边界时响应。
进阶示例：进入变红，离开变蓝
下面这个例子把 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;font-weight:bold;">将鼠标移入移出这段文字</p>
<script>
$(document).ready(function(){
$("p").mouseenter(function(){
$("p").css("background-color", "#e74c3c");
});
$("p").mouseleave(function(){
$("p").css("background-color", "#2980b9");
});
});
</script>
</body>
</html>
鼠标进入段落区域，背景变红；移出后背景变蓝。这种模式可以套用到很多场景——导航链接的悬停高亮、卡片的阴影变化、图标按钮的状态切换等。
mouseleave 和 mouseout 的区别
这两个方法都是在鼠标离开元素时触发，但行为上有一个重要差异，和 mouseenter 与 mouseover 的区别对应：
-
mouseleave不会冒泡。鼠标从父元素移动到内部的子元素上时，父元素的mouseleave不会触发。只有当鼠标离开父元素的边界时才会触发。 -
mouseout会冒泡。鼠标从父元素移动到子元素上时，父元素的mouseout也会被触发，因为子元素的mouseout冒泡到父元素了。
这个差异在嵌套结构多的元素上尤其明显。比如一个卡片容器里包含标题、图片、描述文字等多个子元素，用 mouseleave 可以保证鼠标在整个卡片区域内移动时不会反复触发离开事件，只有在真正离开卡片边界时才触发一次。用 mouseout 的话，鼠标每经过一个子元素边界都会触发一次。
项目开发中，mouseenter/mouseleave 组合比 mouseover/mouseout 更符合直觉，也少了很多需要额外处理冒泡的麻烦。除非有特殊需求要利用冒泡机制做事件委托，一般悬停交互都用 mouseenter/mouseleave。
本节课程知识要点
-
mouseleave()在鼠标指针离开元素边界时触发，通常与mouseenter()成对使用。 -
mouseleave不会冒泡，鼠标在元素内部子元素之间移动时不会误触发。 -
与
mouseout的核心区别在于冒泡行为：mouseleave不冒泡，mouseout会冒泡。 -
项目开发中推荐
mouseenter/mouseleave组合处理悬停交互，行为更稳定可预期。 -
如果悬停效果只是改变样式，优先考虑 CSS 的
:hover伪类；涉及显示隐藏元素、触发动画或异步请求等逻辑时才用 JS 事件处理。
mouseleave() 完成了鼠标悬停交互闭环的“离开”环节。它和 mouseenter() 配对构成了完整的鼠标进出监听体系。理解它们在事件冒泡上的行为差异，能帮助在开发中避开很多奇怪的“明明鼠标还在里面却触发了离开事件”的问题。到这里，鼠标事件的四个核心方法——mouseenter、mouseleave、mouseover、mouseout——的关系已经清晰了，后续在项目中根据场景选用即可。
