jQuery mouse event mouseleave() event
Definition and Usage
The mouseleave event occurs when the mouse pointer leaves an element.
This event is most often used together with the mouseenter event.
mouseleave() method triggers the mouseleave event, or specifies a function to run when the mouseleave event occurs.
Note: Unlike the mouseout event, the mouseleave event will only be triggered when the mouse pointer leaves the selected element. If the mouse pointer leaves any child element, the mouseout event will also be triggered.
Let’s take a look at an example
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
<script type="text/javascript">
x=0;
y=0;
$(document).ready(function(){
$("div.out").mouseout(function(){
$(".out span").text(x+=1);
});
$("div.leave").mouseleave(function(){
$(".leave span").text(y+=1);
});
});
</script>
</head>
<body>
<p>不論鼠標(biāo)指針離開被選元素還是任何子元素，都會觸發(fā) mouseout 事件。</p>
<p>只有在鼠標(biāo)指針離開被選元素時，才會觸發(fā) mouseleave 事件。</p>
<div class="out" style="background-color:lightgray;padding:20px;width:300px;">
<h2 style="background-color:white;">被觸發(fā)的 Mouseout 事件：<span></span></h2>
</div>
</br>
<div class="leave" style="background-color:lightgray;padding:20px;width:300px;">
<h2 style="background-color:white;">被觸發(fā)的 Mouseleave 事件：<span></span></h2>
</div>
</body>
</html> 
