鼠标停在睁眼的图片上，图片会变成闭眼的效果

最新推荐文章于 2021-08-30 14:44:57 发布

麦田里的守望

最新推荐文章于 2021-08-30 14:44:57 发布

阅读量1.7k

点赞数

分类专栏： html代码

本文链接：https://blog.youkuaiyun.com/qq_40281230/article/details/79502882

版权

8 篇文章

订阅专栏

本文介绍了一个简单的网页交互案例，通过JavaScript实现鼠标悬停时图片从睁开眼睛变为闭上眼睛的效果。该案例使用了HTML和JavaScript的基本语法，展示了如何通过onmouseover和onmouseout事件触发不同的函数来改变页面中图片的状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现代码如下：

<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title></title>
	<script>

	//睁眼
	function openEye(){
	var eye = document.getElementById("eye");
	eye.src = "img/eye01.jpg";
	}

	//闭眼
	function closeEye(){
	var eye = document.getElementById("eye");
	eye.src = "img/eye02.jpg";
	}

	</script>
	</head>
	<body>

	<div onmouseover="closeEye()" onmouseout="openEye()" style="float: left;border: 1px solid #000000;">
	<img id="eye" src="img/eye01.jpg" width="200px" />
	</div>

	</body>
	</html>