理解mouseover,mouseout,mouseenter,mouseleave
mouseover定义和用法
当鼠标指针位于元素上方时，会发生 mouseover 事件。
该事件大多数时候会与 mouseout 事件一起使用。
mouseover() 方法触发 mouseover 事件，或规定当发生 mouseover 事件时运行的函数。
注释：与 mouseenter 事件不同，不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。
<div class="parent">父亲
<div class="child">儿子<span></span></div>
</div>
<script type="text/javascript">
$(function(){
var x=1;
$(".parent").mouseover(function(){
$(".parent span").text(++x);
});
$(".parent").mouseout(function(){
$(".parent span").text(++x);
});
});
</script>
当鼠标在父亲容器和父亲外容器之间切换时里面的值每次只会加1，当鼠标在父亲容器和儿子容器之间切换时，里面的值每次会加2，因为不论鼠标指针穿过被选元素或其子元素都会触发mouseover，mouseout同理。
mouseenter定义和用法
当鼠标指针穿过元素时，会发生 mouseenter 事件。
该事件大多数时候会与 mouseleave 事件一起使用。
mouseenter() 方法触发 mouseenter 事件，或规定当发生 mouseenter 事件时运行的函数。
注释：与 mouseover 事件不同，只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。如果鼠标指针穿过任何子元素，同样会触发 mouseover 事件。
<script type="text/javascript">
$(function(){
var x=1;
$(".parent").mouseenter(function(){
$(".parent span").text(++x);
});
$(".parent").mouseleave(function(){
$(".parent span").text(++x);
});
});
</script>
只有当鼠标经过父亲容器的时候才会触发，经过儿子容器是没有反应的，mouseleave同样，只有离开父亲容器的时候才会促发。
但是有个问题，当用绝对定位让儿子容器偏离父亲元素的覆盖面积时，效果上mouseenter跟mouseover情况一样了：
<style type="text/css">
.parent{
position: relative;
width:150px;
height:150px;
background: red;
}
.child{
position: absolute;
top:160px;
left:160px;
width:100px;
height:100px;
background: yellow;
}
</style>
<script type="text/javascript">
$(function(){
var x=1;
$(".parent").mouseenter(function(){
$(".parent span").text(++x);
});
$(".parent").mouseleave(function(){
$(".parent span").text(++x);
});
});
</script>
使用mouseenter，鼠标在儿子容器上面经过时也会触发mouseenter，原因是这时候鼠标进入儿子容器的时候实际上就是进入了父亲容器。