通过jQuery实现鼠标悬停效果时通常会用到mouseover和mouseout这对事件,那么当鼠标离开元素时所触发的mouseout与mouseleave的区别,表面上看这两者的意思是差不多，但实际上是有很大区别的。

mouseout() 方法
当鼠标指针从元素上移开时，发生 mouseout 事件。该事件大多数时候会与 mouseover 事件一起使用。

mouseleave() 方法
当鼠标指针离开元素时，会发生 mouseleave 事件。该事件大多数时候会与 mouseenter 事件一起使用。
下面我们通过实际例子来看一下：

<div class=”incate”>

<h2>所有商品分类</h2>

<div class=”lcacont”>

<ul>

<li><a href=”#”>iPhone5S/5 ケース/カバー</a> </li>

<li><a href=”#”>iPhone5Cケース / カバー</a></li>

<li><a href=”#”>iPhone4S/4 シリコンケース</a></li>

</ul>

</div>

</div>

<script  type=”text/javascript” src=”js/jquery-1.4.2.min.js”></script>

<script type=”text/javascript”>

(function(){

var $subblock = $(“#mlcate”), $head=$subblock.find(‘h2′), $ul = $(“#mlcate”), $ul1 = $(“#lcate”);

$head.mouseover(function(e){

$ul1.show();

});

$ul.mouseover(function(event){

event.stopPropagation();

});

$ul.mouseleave(function(e){

$ul1.hide();

});

})();

</script>

运行时我们会发现，如果使用mouseout事件时，在鼠标离开
标签时显示的菜单就会自动隐藏，而如果使用mouseleave事件，只有在鼠标离开