二维码显示与隐藏

最新推荐文章于 2023-02-01 16:56:26 发布

广东话的蛇皇

最新推荐文章于 2023-02-01 16:56:26 发布

阅读量392

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_43618136/article/details/104251349

版权

前端专栏收录该内容

352 篇文章 1 订阅

订阅专栏

二维码显示与隐藏

鼠标进入
在这里插入图片描述
鼠标离开

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.small{
			width: 50px;
			height: 50px;
			background: url(images/code.jpg) no-repeat;
			background-size: 50px 50px;
			position: fixed;
			right: 10px;
			top: 40%;
		}
		.first,.second{
			width: 80px;
			height: 80px;
			position: absolute;
		}
		.first{
			top: 0;
			left: -30px;
		}
		.second{
			top: 80px;
			left: -30px;

		}
		.hide{
			display: none;
		}
		.show{
			display: block;
		}
		.small a{
			display: block;
			width: 50px;
			height: 50px;
		}
	</style>
</head>
<body>
	<div class="small" id="small">
		<a href=""></a>
		<div class="hide" id="big">
			<img class="first" src="images/code1.jpg">
			<img class="second" src="images/code2.jpg">
		</div>
	</div>
	<script type="text/javascript">
		var mask = document.getElementById("small").getElementsByTagName("a")[0];
		mask.onmouseover = function () {
			document.getElementById("big").className = "show";
		};
		mask.onmouseout = function () {
			document.getElementById("big").className = "hide";
		};
	</script>
</body>
</html>