onmouseover事件

猫老九じ

于 2022-09-28 17:52:00 发布

阅读量1k

点赞数

分类专栏： javascript基础文章标签： javascript 前端 servlet

本文链接：https://blog.csdn.net/qq_73686203/article/details/127094106

版权

javascript基础专栏收录该内容

8 篇文章 0 订阅

订阅专栏

onmouseover：鼠标从元素上移出

案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#b{
				width: 880px;
				height: 400px;
				background-image: url(../img/1.jpg);
				background-repeat: no-repeat;
			}
		</style>
	</head>
	<body>
		<div class="a">
			<img src="../img/1.jpg" alt="" width="200" >
			<img src="../img/2.jpg" alt="" width="200" >
			<img src="../img/3.jpg" alt="" width="200" >
			<img src="../img/4.jpg" alt="" width="200" >
		</div>
		<div id="b" style="background-image: url(../img/1.jpg);">
			
		</div>
		<script type="text/javascript">
			var imgs=document.querySelectorAll(".a img")
			//给每一个img标签绑定一个onmouseover事件：鼠标移入到标签上触发的事件
			//onmouseout:鼠标从元素上移出
			for(var i=0;i<imgs.length;i++){
				img[i].onmouseover=function(){
					document.getElementById("b").style.backgroundImage="url("+this.src+")"
				}
			}
		</script>
	</body>
</html>