jQuery中的mouseleave和mouseout的區別
$("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 事件。
---恢復內容結束---
深度理解onmouseover事件和onmouseout事件
對於CSS的學習到此就告一段落了，其中自己感覺在CSS的學習中最有效的方法還是去進行大量的案例仿寫，這樣我們可以學習別的人是怎樣布局的，不會不要緊，可以多去學習借鑒一下別人的經驗啊。
這兩天又接觸了onmouseover事件和onmouseout事件，一直以為它們只是簡單的分別實現鼠標指針移動到元素上時觸發事件和在鼠標指針移出指定的對象時觸發事件，但是突然發現這些只是對它們簡單的描述，下面讓我們一起看看它們終究還有神馬奇怪的特性，是好還是壞呢？
首先實現一個盒子：
給這個盒子上綁定上onmouseover事件和onmouseout事件
發現它們不會發生什么問題，然后（嘿嘿，你懂得！）
讓我們創建一個B元素，讓它被嵌套在A元素中，作為A的子元素
我們依舊只給外層父元素A綁定onmouseover事件和onmouseout事件，你會發現發生什么了呢？對，沒錯！當鼠標移入移除A的子元素B的時候居然也發生了onmouseover事件和onmouseout事件！！Why？這不是我想要的！難道這時候B就不在是A的一部分了嗎？當然不是，要不也不會在移入B元素時發生onmouseover事件。這樣證明，B元素還是A不可分割的一部分啊。
那到底是怎么回事呢？終究還是事件冒泡搞得鬼？大家都知道常用的瀏覽器中有兩種事件流：事件冒泡和事件捕獲。讓我們看一下事件冒泡的定義：事件按照從最特定的事件目標逐級向上傳播到最不特定的事件目標(document對象)的順序。所以說當鼠標移入移除A的子元素B的時候，B的onmouseover事件和onmouseout事件會觸發，但是它自己沒有這兩個事件啊，就把這兩個事件傳遞給了它的父元素A，A有這兩個事件所以就發生了我們看到的情況。
有人會說那怎么避免呢，畢竟不是所有人都會是這種需求嘛，我們只要父級元素的事件觸發就好，子級元素就讓它靜靜的當個美男子就好了。
所以W3C在mouseover和mouseout事件中添加了relatedTarget屬性 ：
•在mouseover事件中，它表示鼠標來自哪個元素
•在mouseout事件中，它指向鼠標去往的那個元素
而而Microsoft在mouseover和mouseout事件中添加了兩個屬性
•fromElement，在mouseover事件中表示鼠標來自哪個元素
•toElement，在mouseout事件中指向鼠標去往的那個元素
所以我們就有了如下代碼的實現
1 document.getElementById('box1').onmouseover = function (e) {
2 if (!e) e = window.event;
3 var reltg = e.relatedTarget ? e.relatedTarget : e.fromElement;
4 while (reltg && reltg != this) reltg = reltg.parentNode;
5 if (reltg != this) {
6 // 這里可以編寫 onmouseenter 事件的處理代碼
7 alert('111');
8 }
9 }
10 document.getElementById('box1').onmouseout = function (e) {
11 if (!e) e = window.event;
12 var reltg = e.relatedTarget ? e.relatedTarget : e.toElement;
13 while (reltg && reltg != this) reltg = reltg.parentNode;
14 if (reltg != this) {
15 // 這里可以編寫 onmouseleave 事件的處理代碼
16 alert('2222');
17 }
18 }