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 );
}
})