JavaScript 鼠标划入划出

最新推荐文章于 2024-06-04 18:14:02 发布

原创最新推荐文章于 2024-06-04 18:14:02 发布 · 6.7k 阅读

3 ·

CC 4.0 BY-SA版权

JavaScript 专栏收录该内容

41 篇文章

订阅专栏

本文介绍了一个简单的网页交互效果实现：当鼠标移入指定区域时显示一张图片，鼠标移出该区域时隐藏图片。使用纯 JavaScript 实现，不依赖任何第三方库。

<!DOCTYPE html>
<html>
	<head>
		<title>鼠标移入移出</title>
		<meta charset="utf-8" />
	</head>
	<body>
		<div id="over">My lovely Heburn.</div>
		<div id="heburn" style="display:none;"><img src="ah.jpg"></div>
	</body>
	<script>
		var over = document.getElementById('over');
		var heburn = document.getElementById('heburn');
		
		over.onmouseover = function () {
			heburn.style.display = 'block';
		};		
		over.onmouseout = function () {
			heburn.style.display = 'none';
		};
	</script>
</html>