我想實現的目標：當鼠標進入黑色框時，橙色框執行淡入動畫；當黑色框范圍移動的時候（即使經過粉色框，動畫仍然不被觸發）；當鼠標移出的時候，橙色方塊消失。
遇到的問題闡述：當鼠標移入黑色框的時候，橙色框執行淡入動畫，但是當鼠標從黑色框經過粉色框的時候，橙色框就消失了，然后又執行一遍淡入動畫。當鼠標從粉色框移出到黑色框的時候，橙色框的淡入動畫又被執行。這不是我想要的。
初期代碼：
<!DOCTYPE html><html><head><script src="jquery.js"></script> <meta charset="utf-8"> <title>mouseover mouseout</title> <style type="text/css" media="screen"> .parent{ width:200px; height:200px; background:black;}.child{ width:100px; height:100px; background:pink;}.a1{ width:40px; height:40px; background:orange; display:none;} </style></head><body><div class="parent"> <div class="child"></div> <div class="a1"></div></div><script>$('.parent').on('mouseover',function(e){ $('.a1').show(1000); }); $('.parent').on('mouseout',function(e){ $('.a1').css('display','none'); });</script></body></html>首先我們解釋一下原因，為什么會出現這些問題。
當鼠標從黑色框移到粉色框的時候，此時黑色框的mouseout的被觸發，又由于事件冒泡，黑色框的mouseover事件隨即被觸發，所以實際上，橙色框先消失，然后立即執行淡入動畫。這也就是我們看到的過程。
當鼠標從粉色框移到黑色框的時候，此時黑色框的mouseout又被觸發（因為不論鼠標穿過被選元素或其子元素，都觸發 mouseover 事件），同時mouseover也被觸發，所以又出現了再次執行淡入效果的過程。
方法一：用mouseleave/mouseout代替mouseover/mouseout【最佳方法】
先看一下mouseout&mouseover與mouseleave&mouseenter用法上的區別
mouseover與mouseenter
不論鼠標指針穿過被選元素或其子元素，都會觸發 mouseover 事件。
只有在鼠標指針從元素外穿入被選元素（到元素內）時，才會觸發 mouseenter 事件。
mouseout與mouseleave
不論鼠標指針離開被選元素還是任何子元素，都會觸發 mouseout 事件。
只有在鼠標指針從元素內穿出被選元素（到元素外）時，才會觸發 mouseleave 事件。
可以看一個簡單的例子看看二者的區別
所以改進的代碼可以為
<!DOCTYPE html><html><head><script src="jquery.js"></script> <meta charset="utf-8"> <title>mouseover mouseout</title> <style type="text/css" media="screen"> .parent{ width:200px; height:200px; background:black;}.child{ width:100px; height:100px; background:pink;}.a1{ width:40px; height:40px; background:orange; display:none;} </style></head><body><div class="parent"> <div class="child"></div> <div class="a1"></div></div><script>$('.parent').on('mouseenter',function(e){ $('.a1').show(1000); }); $('.parent').on('mouseleave',function(e){ $('.a1').css('display','none'); });</script></body></html>方法二：利用e.stopPropagation()阻止事件進一步傳播
e.stopPropagation()會終止事件在傳播過程的捕獲、目標處理或起泡階段進一步傳播。調用該方法后，該節點上處理該事件的處理程序將被調用，事件不再被分派到其他節點。
<!DOCTYPE html><html><head><script src="jquery.js"></script> <meta charset="utf-8"> <title>mouseover mouseout</title> <style type="text/css" media="screen"> .parent{ width:200px; height:200px; background:black;}.child{ width:100px; height:100px; background:pink;}.a1{ width:40px; height:40px; background:orange; display:none;} </style></head><body><div class="parent"> <div class="child"></div> <div class="a1"></div></div> <script> $('.parent').on('mouseover',function(e){ $('.a1').show(1000); }); $('.parent').on('mouseout',function(e){ $('.a1').css('display','none'); }); $('.child').on('mouseover',function(e){ e.stopPropagation(); $('.a1').css('display','block'); //這是保證動畫體的末狀態不變 }); $('.child').on('mouseout',function(e){ e.stopPropagation(); //防止從粉色框移出到黑色框時再次觸發其他事件 }) </script></body></html>拓展思考：
1.如果子元素過多怎么辦，難道每個都要去綁定e.stopPropagation()?
用jquery的一個選擇器.children()，比如$('.parent').children()。獲得匹配元素集合中每個元素的子元素。
以上所述就是本文的全部內容了，希望大家能夠喜歡。
新聞熱點
疑難解答
