【前端 HTML+CSS+JavaScript(JS)】DOM练习-onmouseover事件鼠标悬浮切换图片带注释/总结

_小鹰

已于 2022-02-15 22:50:56 修改

阅读量760

点赞数 1

分类专栏：前端

于 2022-02-15 22:32:39 首次发布

本文链接：https://blog.csdn.net/cc2855816075/article/details/122953494

版权

JavaScript 鼠标事件图片切换 DOM操作悬停效果

关键词由CSDN通过智能技术生成

前端专栏收录该内容

38 篇文章 1 订阅

订阅专栏

效果：

鼠标放到图片上图片变化
在这里插入图片描述

在这里插入图片描述

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>作业5-mouse事件</title>
		<script src="utility.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		
		<script type="text/javascript">
			// function fun1(a){
			// 	$("img").src = "img-" + a + ".jpg";
			// }
			
			//
			function fun1(a){
				a.src = "img-2.jpg";
			}
			function fun2(a){
				a.src = "img-1.jpg";
			}
			
		</script>
		
		<div id="b-box">
			<!-- <img src="img-1.jpg" alt="" id="img" οnmοuseοver="fun1(2)" οnmοuseοut="fun1(1)"/> -->
			<img src="img-1.jpg" alt="" id="img" onmouseover="fun1(this)" onmouseout="fun2(this)"/>
		</div>
	</body>
</html>

其中用到的utility.js：

function $(id){
	return document.getElementById(id);
}
function l(a){
	console.log(a);
}

DOM练习文件：

https://download.csdn.net/download/cc2855816075/80848641

_小鹰

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
【前端 HTML+CSS+JavaScript(JS)】DOM练习-onmouseover事件鼠标悬浮切换图片带注释/总结

效果：鼠标放到图片上图片变化代码：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>作业5-mouse事件</title> <script src="utility.js" type="text/javascript" charset="utf-8"></script> </head> <body&
复制链接

扫一扫