之前做鼠标移入一个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;
}
① hover事件
$(".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