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 alert("div"); 11 }); 12 $("div.over h2").mouseover(function(){ 13 $(".over span").text(x+=1); 14 alert("a") 15 }); 16 17 $("div.enter").mouseenter(function(){ 18 $(".enter span").text(y+=1); 19 }); 20 $("div.enter h2").mouseenter(function(){ 21 $(".enter span").text(y+=1); 22 }); 23 24 }); 25 </script> 26 </head> 27 <body> 28 <p>不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。</p> 29 <p>只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。</p> 30 <div class="over" style="background-color:lightgray;padding:20px;40%;float:left"> 31 <h2 style="background-color:white;">被触发的 Mouseover 事件：<span></span></h2> 32 </div> 33 <div class="enter" style="background-color:lightgray;padding:20px;40%;float:right"> 34 <h2 style="background-color:white;">被触发的 Mouseenter 事件：<span></span></h2> 35 </div> 36 </body> 37 </html>
不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。
只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。