1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <script type="text/javascript" src="../jquery-1.12.4.min.js"></script> 7 <script type="text/javascript"> 8 $(function(){ 9 $('.con').mouseover(function(){ 10 alert('移入'); 11 }) 12 13 $('.con').mouseout(function(){ 14 alert('移出'); 15 }) 16 17 /* 18 $('.con2').mouseenter(function(){ 19 alert('移入'); 20 }) 21 22 $('.con2').mouseleave(function(){ 23 alert('移出'); 24 }) 25 */ 26 27 // mouseenter和mouseleave可以合并成这样写 28 $('.con2').hover(function(){ 29 alert('移入'); 30 },function(){ 31 alert("移出"); 32 }) 33 34 }); 35 </script> 36 <style type="text/css"> 37 .con,.con2{ 38 width: 200px; 39 height: 200px; 40 background-color: gold; 41 } 42 .box,.box2{ 43 width: 100px; 44 height: 100px; 45 background-color: green; 46 } 47 </style> 48 </head> 49 <body> 50 <div class="con"> 51 <div class="box"></div> 52 </div> 53 <br> 54 <br> 55 <div class="con2"> 56 <div class="box2"></div> 57 </div> 58 </body> 59 </html>