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>