mouseover mouseout：在鼠標進入或者離開作用元素或者其子元素時，都會觸發
在進入son的時候，因爲離開了father，所以會觸發一次mouseout，同理，在再次進入father的時候，也因爲離開了son，所以先觸發了一次mouseout再觸發mouseover。
mouseenter mouseleave：在鼠標進入作用元素的時候纔會觸發。
以下是測試代碼
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Document</title>
- </head>
- <style>
- body{
- margin-top: 100px;
- margin-left: 100px;
- }
- .father{
- width: 200px;
- height: 200px;
- background-color: blue;
- overflow: hidden;
- }
- .son{
- width: 100px;
- height: 100px;
- background-color: red;
- margin:50px 50px;
- }
- </style>
- <script src="jquery.js"></script>
- <script>
- $(document).ready(function(){
- $('.father').mouseover(function(){
- console.log('進入');
- });
- $('.father').mouseout(function(){
- console.log('出去');
- });
- });
- </script>
- <body>
- <div class="father">
- <div class="son"></div>
- </div>
- </body>
- </html>
文章轉自：林木森森森