鼠标事件分析(onmouseenter、onmouseover、onmouseleave和onmouoseout的区别)

先上个代码

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset=" utf-8">
 5 <style>
 6     #biggest,#biggestS  {
 7         height: 300px;
 8         width: 300px;
 9         background-color: cadetblue;
10         margin: 200px auto;
11         position: relative;
12     }
13     #middle, #middleS {
14         height: 200px;
15         width: 200px;
16         position: absolute;
17         background-color: antiquewhite;
18         top: 50px;
19         left: 50px;
20         text-align: center;
21         font-weight: bold;
22         line-height: 200px;
23         vertical-align: middle;
24     }
25     
26 </style>
27 </head>
28 <body>
29 <div id="biggest" onmouseenter="console.log('我enter了父div')" onmouseleave="console.log('我leave了父标签')">
30 <div id="middle" onmouseenter="console.log('我enter了子div')" onmouseleave="console.log('我leave了子标签')">
31     enter and leave
32 </div>
33 </div>
34 <div id="biggestS" onmouseover="console.log('我over了父div')" onmouseout="console.log('我out了父标签')">
35 <div id="middleS" onmouseover="console.log('我over了子div')" onmouseout="console.log('我out了子标签')">
36     over and out
37 </div>
38 </div>
39 </body>
40 </html>