JQuery--mouseover()与moseout()的区别

mouseover()与mouseout()区别

 普通鼠标移入移出事件
     语法:
         mouseover()/mouseout()
     功能:
         当鼠标移入/移出到添加事件的元素或其子元素的时候，都会被触发
!!mouseenter/mouseleave是更好的鼠标移入事件!!
     语法：
         mouseenter()/mouseleave()
     功能：
         当鼠标移入/移出到添加事件的元素才会被触发,子元素不会被触发
例子：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .father{
 8              300px;
 9             height: 200px;
10             background-color: #2AB89A;
11             border: 1px solid #cc6600;
12         }
13 
14         .son{
15              100px;
16             height: 100px;
17             background-color:skyblue;
18             border: 1px solid #fff;
19         }
20     </style>
21     <script src="lib/jquery-1.12.2.js"></script>
22     <script>
23         $(function () {
24             // mouseover
25        /*     $('.father').mouseover(function () {
26                 console.log("moseouer");
27             });
28 
29             // mouseout
30             $('.father').mouseout(function () {
31                 console.log("mouseout");
32                 $(this).hide();
33             });*/
34 
35             $('.father').mouseenter(function () {
36                 console.log("mouseenter");
37             });
38 
39             // mouseout
40             $('.father').mouseleave(function () {
41                 console.log("mouseleave");
42                 $(this).hide();
43             });
44         });
45     </script>
46 </head>
47 <body>
48 <h1>鼠标移出大盒子的时候才隐藏大盒子</h1>
49 <div class="father">
50     外面的老爹
51     <div class="son">
52         里面的孩子
53     </div>
54 </div>
55 </body>
56 </html>