mouseover和mouseout对应 //鼠标移入移出触发该元素及子元素
mouseenter和mouseleave对应 //鼠标移入移出只触发该元素
看完例子即可知道其区别：
mouseover与mouseenter不同：
1 <html> 2 <head> 3 <script type="text/javascript" src="/jquery/jquery.js"></script> 4 <script type="text/javascript"> 5 x=0; 6 y=0; 7 $(document).ready(function(){ 8 $("div.over").mouseover(function(){ 9 $(".over span").text(x+=1); 10 }); 11 $("div.enter").mouseenter(function(){ 12 $(".enter span").text(y+=1); 13 }); 14 }); 15 </script> 16 </head> 17 <body> 18 <p>不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。</p> 19 <p>只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。</p> 20 <div class="over" style="background-color:lightgray;padding:20px;40%;float:left"> 21 <h2 style="background-color:white;">被触发的 Mouseover 事件：<span></span></h2> 22 </div> 23 <div class="enter" style="background-color:lightgray;padding:20px;40%;float:right"> 24 <h2 style="background-color:white;">被触发的 Mouseenter 事件：<span></span></h2> 25 </div> 26 </body> 27 </html>
mouseout mouseleave区别
1 <html> 2 <head> 3 <script type="text/javascript" src="/jquery/jquery.js"></script> 4 <script type="text/javascript"> 5 x=0; 6 y=0; 7 $(document).ready(function(){ 8 $("div.over").mouseout(function(){ 9 $(".over span").text(x+=1); 10 }); 11 $("div.enter").mouseleave(function(){ 12 $(".enter span").text(y+=1); 13 }); 14 }); 15 </script> 16 </head> 17 <body> 18 <p>不论鼠标指针移出被选元素或其子元素，都会触发 mouseout 事件。</p> 19 <p>只有在鼠标指针移出被选元素时，才会触发 mouseleave 事件。</p> 20 <div class="over" style="background-color:lightgray;padding:20px;40%;float:left"> 21 <h2 style="background-color:white;">被触发的 mouseout事件：<span></span></h2> 22 </div> 23 <div class="enter" style="background-color:lightgray;padding:20px;40%;float:right"> 24 <h2 style="background-color:white;">被触发的 mouseleave事件：<span></span></h2> 25 </div> 26 </body> 27 </html>