区别：
mouseover与mouseenter
不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。
只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。
mouseout与mouseleave
不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。
只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #id1 { width: 300px; height: 300px; background-color: #c77bff; margin: 50px auto; } #id2 { width: 70px; height: 70px; background-color: #94ff74; display: none; margin: 50px 0 0 230px; } </style> </head> <body> <script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script> <div id="id1"> <div id="id2"> </div> </div> <script type="text/javascript"> var timer; $("#id1").mouseover(function () { $('#id2').show(); if (timer) { clearTimeout(timer) } }).mouseout(function () { if (timer) { clearTimeout(timer) } timer = setTimeout(function () { $('#id2').hide(); }, 300) }); </script> </body> </html>