$("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 事件。
下面是w3c上的例子很便於大家理解
<html>
<head>
<script type="text/javascript" src="/jquery/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>不論鼠標指針離開被選元素還是任何子元素,都會觸發 mouseout 事件。</p>
<p>只有在鼠標指針離開被選元素時,纔會觸發 mouseleave 事件。</p>
<div class="out" style="background-color:lightgray;padding:20px;width:40%;float:left">
<h2 style="background-color:white;">被觸發的 Mouseout 事件:<span></span></h2>
</div>
<div class="leave" style="background-color:lightgray;padding:20px;width:40%;float:right">
<h2 style="background-color:white;">被觸發的 Mouseleave 事件:<span></span></h2>
</div>
</body>
</html>