之前做鼠标移入一个div后显示一个半透明层这样的效果时出了点小问题，就是鼠标移上去后在这个半透明层上移动时会不断的闪烁。
今天再看时才发现原来我写的div跟这个半透明的div是同级的，怪不得会闪烁啦~那时居然没注意到，不过也用另一种方法解决了。
一直对mouseover， mouseout和mouseenter， mouseleave还有hover之间的区别很联系总是模模糊糊的~这回真去认真比对了下~
mouseover - 鼠标指针经过任何子元素都会触发绑定在父元素上的mouseover事件
mouseout - 鼠标指针离开任何子元素时都会触发父元素上的mouseover事件
mouseenter - 鼠标指针经过绑定的元素时触发事件，经过其子元素时，不会触发事件
mouseleave - 只有当鼠标离开绑定的元素时才会触发该事件
hover！= mouseover+mouseout
hover=mouseenter + mouseleave
实践了下：
<body>
<div class="cont">
<div class="parent">
<div class="hover"></div>
</div>
</div>
</body>.cont{
position: relative;
margin :0 auto;
width:100px;
height: 100px;
}
.parent{
position: relative;
width:100px;
height: 100px;
background: pink;
}
.hover{
position: absolute;
top:0;
left: 0;
width:100px;
height: 100px;
background: #ccc;
display: none;
}$(".parent").hover(function(){
$(".hover").css("display","block");
console.log("1")
},function(){
$(".hover").css("display","none");
console.log("2")
});鼠标移入移出.parent div时控制台输出：
1
2
② mouseenter 和mouseleave事件
$(".parent").mouseenter(function(){
$(".hover").css("display","block");
console.log("1")
});
$(".parent").mouseleave(function(){
$(".hover").css("display","none");
console.log("2")
});鼠标移入移出.parent div时控制台输出：
1
2
③mouseover和mouseout事件
$(".parent").mouseover(function(){
$(".hover").css("display","block");
console.log("1")
});
$(".parent").mouseout(function(){
$(".hover").css("display","none");
console.log("2")
});鼠标第一次移入.parent div时，控制台输出：
1
2
1
移出时，输出：
2
这个就是传说中的冒泡事件了，才会在第一次移入.parent div时有两个1 出现，
第一个1是进入.parent div时触发的事件；
第二个1是进入.hover div时发生的mouseover事件向上冒泡到.parent div 触发的；
最后为什么木有两个2出现啊 冒泡吖~
这是因为最后移出时只是在.hover上发生的，有冒泡了，.parent 的移出在.hover的显示之前发生了，即第一个2
2159
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
