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

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值