mouseenter和mouseover ，mouseleave 和mouseout ,hover的区别

69 阅读 0 评论 46 点赞

我是靠谱客的博主彩色秀发，最近开发中收集的这篇文章主要介绍mouseenter和mouseover ，mouseleave 和mouseout ,hover的区别，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

以前也遇到过这种问题，就是做简单的动画的时候，经常闪退，这次又遇到了，就总结一下。

先来看一下mouseover和mouseenter的区别

下面的效果是我都是触发一次的效果。

结果就是mouseover会在移进的时候触发一次，在移出的时候又触发一次，那就是两次，没法实现顺畅的移进移出效果。

mouseenter 就是移进的时候触发那一次。

上面的代码也放一下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.over{
background-color: #66d3ff;
width:400px;
float:left;
padding: 10px 10px;
}
.enter{
background-color: #66d3ff;
width:400px;
float:left;
margin-left:30px;
padding: 10px 10px;
}
h2{
background-color: #fff;
padding: 5px 5px;
}
</style>
</head>
<body>
<p>mouseover 事件:不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。</p>
<p>mouseenter 事件:只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。</p>
<div class="over">
<h2>被触发的 Mouseover 事件次数：<span></span></h2>
</div>
<div class="enter">
<h2>被触发的 Mouseenter 事件次数：<span></span></h2>
</div>
</body>
</html>

js：


var x = 0,y = 0;
var div1 = document.getElementsByClassName("over")[0];
div1.addEventListener("mouseover",function(){
var span = this.getElementsByTagName("span")[0];
span.innerText = (x +=1);
},false);
var div2 = document.getElementsByClassName("enter")[0];
div2.addEventListener("mouseenter",function(){
var span = this.getElementsByTagName("span")[0];
span.innerText = (y +=1);
},false);

然后自己就可以做一个小demo啦

效果就是单独的两个div，放在A上面 B出现，移出A的作用域 B就是消失，过程很流畅，可以试一下。

Html：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试</title>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
<style>
#a{
margin-top: 40px;
background-color: pink;
color:#000;
height:300px;
width:100px;
text-align:center;
position: relative;
}
#b{
display:none;
background-color:#ccc;
color:red;
height:400px;
width:200px;
text-align:center;
position:absolute;
top:0;
left: 100px;
}
</style>
</head>
<body>
<div>
<div id="a" οnmοuseenter="a()" οnmοuseleave="c()">我是A</div>
<div id="b" οnmοuseenter="b()" οnmοuseleave="c()">我是B</div>
</div>
</body>
</html>

js：


var timer=null;
function a(){
if(timer){
clearTimeout(timer);
}
if($("#b").is(":hidden")){
$("#b").show();
}
}
function b(){
clearTimeout(timer);
}
function c(){
timer=setTimeout(function () {
$("#b").hide();
},100)
}