JQuery--mouseover()与moseout()的区别
Posted QinXiao.Shou
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JQuery--mouseover()与moseout()的区别相关的知识，希望对你有一定的参考价值。
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 width: 300px; 9 height: 200px; 10 background-color: #2AB89A; 11 border: 1px solid #cc6600; 12 } 13 14 .son{ 15 width: 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>
以上是关于JQuery--mouseover()与moseout()的区别的主要内容，如果未能解决你的问题，请参考以下文章