遮盖层的显示与隐藏

最新推荐文章于 2024-09-18 07:30:00 发布

吃不饱的我

最新推荐文章于 2024-09-18 07:30:00 发布

阅读量62

点赞数

分类专栏：笔记文章标签： css3 css javascript

本文链接：https://blog.csdn.net/yh_31/article/details/125312568

版权

CSS 伪元素遮罩层 hover效果视频播放器

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

笔记专栏收录该内容

70 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.tudou{
				position: relative;
				width: 444px;
				height: 320px;
				margin: 30px auto;
				background-color: pink
			}
			.tudou img{
				width: 100%;
				height: 100%;
			}
			.tudou ::before{
				content: '';
				/* 隐藏遮罩层 */
				display: none;
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background: rgba(0,0,0,.4) url(img/arr.png) no-repeat center;
			}
			.tudou:hover ::before{
				display: block;
				
			}
		</style>
	</head>
	<body>
		<div class="tudou">
			<div class="mask"></div>
			<img src="img/tudou.jpg" >
		</div>
	</body>
</html>