mouseover/mouseenter & mouseout/mouseleave 区别和使用实例

最新推荐文章于 2022-04-17 15:12:21 发布

李小苶

最新推荐文章于 2022-04-17 15:12:21 发布

阅读量698

点赞数 1

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qq_26834399/article/details/105746197

版权

JavaScript 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

1、mouseover和mouseout的效果是对应的；mouseenter和mouseleave的效果是对应的。

2、两者在使用时若没有子元素，效果是相同的。

3、mouseover和mouseout在从父元素进入子元素或从子元素移除到父元素时都会触发。

4、mouseenter和mouseleave只与父元素相关，与子元素不相关，更常用。

复制下方实例，可在浏览器中体验两者区别

<!DOCTYPE html>
<html>
<head>
	<style type="text/css">
		.container{
			width: 500px;
			height: 500px;
			background: red;
		}
		.child{
			display: inline-block;
			width: 300px;
			height: 300px;
			margin: 100px;
			background: green;
		}
	</style>
</head>
<body>
<div class="container"
 onmouseover="eventFn('over')" 
 onmouseout="eventFn('out')" 
 onmouseleave="eventFn('leave')" 
 onmouseenter="eventFn('enter')">
	<div class="child"></div>
</div>
</body>
<script type="text/javascript">
	function eventFn(type){
		console.log(type)
	}
</script>
</html>