css之显示与隐藏

A 神

于 2019-12-24 09:26:19 发布

阅读量137

点赞数

CC 4.0 BY-SA版权

分类专栏： css

本文链接：https://blog.csdn.net/weixin_42378409/article/details/103677254

css 专栏收录该内容

20 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.box{
			position: relative;
			width: 222px;
			height: 220px;
			
			margin: 100px auto;

		}
		.box .one{
			position: absolute;
			display: none;
			left: 0;
			top: 0;
			width: 222px;
			height: 220px;
			background: rgba(0, 0, 0, .3) url(images/arr.png) no-repeat center center;
			
		}
		a:hover .one{
			display: block;
		}
	</style>
</head>
<body>
	
		<div class="box">
			<a href="#">
			<img src="images/3.jpg" alt="">
		<div class="one"></div>
		</a>
	</div>
</body>
</html>

在这里插入图片描述