第二十三节 jQuery鼠标移入事件

 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>