mouseover，mouseout，mouseenter，mouseleave，hover

来源：互联网发布：网络自制剧牺牲图解编辑：程序博客网时间：2024/05/16 09:51

之前做鼠标移入一个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时控制台输出：

② mouseenter 和mouseleave事件

$(".parent").mouseenter(function(){$(".hover").css("display","block");console.log("1")});$(".parent").mouseleave(function(){$(".hover").css("display","none");console.log("2")});

鼠标移入移出.parent div时控制台输出：

③mouseover和mouseout事件

$(".parent").mouseover(function(){$(".hover").css("display","block");console.log("1")});$(".parent").mouseout(function(){$(".hover").css("display","none");console.log("2")});

鼠标第一次移入.parent div时，控制台输出：

移出时，输出：

这个就是传说中的冒泡事件了，才会在第一次移入.parent div时有两个1 出现，

第一个1是进入.parent div时触发的事件；

第二个1是进入.hover div时发生的mouseover事件向上冒泡到.parent div 触发的；

最后为什么木有两个2出现啊冒泡吖~

这是因为最后移出时只是在.hover上发生的，有冒泡了，.parent 的移出在.hover的显示之前发生了，即第一个2