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

最新推荐文章于 2023-01-10 14:13:13 发布

Drenched-oldTimes

最新推荐文章于 2023-01-10 14:13:13 发布

阅读量2.9k

点赞数 3

分类专栏： css 文章标签： hover事件 mouseenter和mouseover 动画效果

本文链接：https://blog.youkuaiyun.com/sinat_38529191/article/details/79881020

版权

css 专栏收录该内容

1 篇文章

订阅专栏

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

先来看一下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)
	}

就酱