当鼠标指针从元素上移开时，发生 mouseout 事件。该事件大多数时候会与 mouseover 事件一起使用。
mouseout() 方法触发 mouseout 事件，或规定当发生 mouseout 事件时运行的函数。
mouseout() 事件,不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。
而 mouseleave 事件，只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。
请看下面例子的演示我们就很清楚的理解了这二个事件的区别。
例子
$("li").each(function(i) {
//删除的鼠标划过的显示与隐藏
$(this).mouseover(function() {
$(this).find(".del").fadeIn(10);
})
$(this).mouseleave(function() {
$(this).find(".del").fadeOut(10);
})
})
上面的代码中如果不是用的mouseleave而是mouseout的话你会发现尚未离开类名的.del这个DIV这个DIV有时候就会闪动。那是因为你可能离开了该DIV的子元素，所以会出发mouseout事件。具体mouseleave和mouseout两者之间的区别主要有以下两点：
1.不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。
2.只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。
例子
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
div {
width: 150px;
height: 150px;
background-color: green;
margin-top: 10px;
}
.children {
width: 80px;
height: 80px;
background-color: red;
}
span {
font-size: 12px;
color: red;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".mouseout").mouseout(function () {
$("span").text("mouseout事件触发了");
})
$(".mouseleave").mouseleave(function () {
$("span").text("mouseleave事件触发了");
})
});
</script>
</head>
<body>
<div class="mouseout">
<div class="children"></div>
</div>
<div class="mouseleave">
<div class="children"></div>
</div>
<span></span>
</body>
</html>
上面的代码测试可能不够便利，不过也可以测试出，当鼠标指针从匹配元素或者匹配元素的子元素移出来的时候都可以触发mouseout事件，但是只有鼠标指针从匹配元素移出时才能触发mouseleave事件。