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;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>
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;width: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;width:40%;float:right">
24 <h2 style="background-color:white;">被触发的 mouseleave事件：<span></span></h2>
25 </div>
26 </body>
27 </html>
时间： 2024-09-28 22:44:49