jquery的hover mouseover mouseout mouseenter mouseleave的区别
1.mouseover mouseout
mouseover - 鼠标指针经过任何子元素都会触发绑定在父元素上的mouseover事件
mouseout - 鼠标指针离开任何子元素时都会触发父元素上的mouseover事件
然后，你把代码拷贝过去try一下，就会有更深刻的理解；
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script type="text/javascript"> $(function (){ var outer=$("#outer"); outer.mouseover(function (){ alert('outer mouseover'); }).mouseout(function (){ alert('outer mouseout'); }) //当子元素的over 和 out事件发生时， //事件会冒泡到父级，也就是说outer上的 over 和 out 会被触发 var inner=$("#inner"); inner.mouseover(function (){ alert('inner mouseover'); }).mouseout(function (){ alert('inner mouseout'); }) }) </script> <style type="text/css"> .outer{ height:100px; width:20%; background-color:green; float:left; margin-left:25px; } .inner{ height:50px; width:60%; margin:25px auto; background-color:red; } </style> </head> <body> <div id="outer" class="outer"> <div id="inner" class="inner"></div> </div> </body> </html>
2.mouseenter mouseleave
mouseenter - 鼠标指针经过绑定的元素时触发事件，经过其子元素时，不会触发事件
mouseleave - 只有当鼠标离开绑定的元素时才会触发该事件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script type="text/javascript" src="script/jquery-1.7.1.min.js"></script> <script type="text/javascript"> $(function (){ var outer1=$("#outer1"); outer1.mouseenter(function (){ alert('outer1 mouseenter'); }).mouseleave(function (){ alert('outer1 mouseleave'); }) var inner1=$("#inner1"); inner1.mouseenter(function (){ alert('inner1 mouseenter'); }).mouseleave(function (){ alert('inner1 mouseleave'); }) }) </script> <style type="text/css"> .outer{ height:100px; width:20%; background-color:green; float:left; margin-left:25px; } .inner{ height:50px; width:60%; margin:25px auto; background-color:red; } </style> </head> <body> <div id="outer1" class="outer"> <div id="inner1" class="inner"></div> </div> </body> </html>
houver：
hover！= mouseover+mouseout
hover=mouseenter + mouseleave
$(function (){ //我们的hover是这样定义的; hover: function( fnOver, fnOut ) { return this.mouseenter( fnOver ).mouseleave( fnOut || fnOver ); } })