mouseover mouseout和mouseenter mouseleave的區別

mouseover mouseout:在鼠標進入或者離開作用元素或者其子元素時,都會觸發

在進入son的時候,因爲離開了father,所以會觸發一次mouseout,同理,在再次進入father的時候,也因爲離開了son,所以先觸發了一次mouseout再觸發mouseover。

 

mouseenter mouseleave:在鼠標進入作用元素的時候纔會觸發。

以下是測試代碼

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Document</title>
  6. </head>
  7. <style>
  8. body{
  9. margin-top: 100px;
  10. margin-left: 100px;
  11. }
  12. .father{
  13. width: 200px;
  14. height: 200px;
  15. background-color: blue;
  16. overflow: hidden;
  17. }
  18. .son{
  19. width: 100px;
  20. height: 100px;
  21. background-color: red;
  22. margin:50px 50px;
  23. }
  24. </style>
  25. <script src="jquery.js"></script>
  26. <script>
  27. $(document).ready(function(){
  28. $('.father').mouseover(function(){
  29. console.log('進入');
  30. });
  31. $('.father').mouseout(function(){
  32. console.log('出去');
  33. });
  34. });
  35. </script>
  36. <body>
  37. <div class="father">
  38. <div class="son"></div>
  39. </div>
  40. </body>
  41. </html>

 

文章轉自:林木森森森

https://blog.csdn.net/huahuahua__/article/details/81669528

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章