mouseover事件与mouseenter事件的区别
mouseover与mouseenter
不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。
只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。
mouseout与mouseleave
不论鼠标指针离开被选元素还是任何子元素，都会触发 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").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;width: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;width:40%;float:right"> 24 <h2 style="background-color:white;">被触发的 Mouseenter 事件：<span></span></h2> 25 </div> 26 </body> 27 </html>
