元素的显示与隐藏，案例：鼠标经过显示遮罩

我是一颗好李子

已于 2022-10-09 13:32:14 修改

阅读量940

点赞数

分类专栏： HTML+css 文章标签： html css

于 2022-07-09 19:10:35 首次发布

本文链接：https://blog.csdn.net/m0_69034993/article/details/125691632

版权

HTML+css 专栏收录该内容

9 篇文章 7 订阅

订阅专栏

1. display 显示隐藏

display属性用于设置一个元素如何显示

display： none；隐藏对象

display： block；除了转换为块元素之外，同时还有显示元素的意思

display隐藏元素后，不再占有原来的位置

2. visibility 显示隐藏

visibility属性用于指定一个元素应可见还是隐藏

visibility： visible; 元素可见

visibility： hidden；元素隐藏

visibility隐藏元素后，继续占有原来的位置

3.overflow 溢出显示隐藏

overflow属性指定了如果内容溢出一个元素的框（超过其指定高度及宽度）时，会发生声明

属性值	描述
visible	不剪切内容也不添加滚动条
hidden	不显示超过对象尺寸的内容，超出的部分隐藏掉
scroll	不管是否超出内容，总是显示滚动条
auto	超出自动显示滚动条，不超出不显示滚动条

鼠标经过显示遮罩：

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title></title>
	<style>
		.zhezhao {
			position: absolute;
			width: 444px;
			height: 320px;
			margin: 30px auto;
			background-color: skyblue;
		}

		.zhezhao img {
			width: 100%;
			height: 100%;
		}

		.mask {
			display: none;
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: rgba(0, 0, 0, 0.4) url(img/播放.jpg) no-repeat center;
		}

		.zhezhao:hover .mask {
			display: block;
		}
	</style>
</head>

<body>
	<div class="zhezhao">
		<div class="mask"></div>
		<img src="img/1.png" alt="" />
	</div>
</body>

</html>

结果图：

我是一颗好李子

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
元素的显示与隐藏，案例：鼠标经过显示遮罩

overflow属性指定了如果内容溢出一个元素的框（超过其指定高度及宽度）时，会发生声明。除了转换为块元素之外，同时还有显示元素的意思。visibility属性用于指定一个元素应可见还是隐藏。visibility隐藏元素后，继续占有原来的位置。display隐藏元素后，不再占有原来的位置。display属性用于设置一个元素如何显示。3.overflow 溢出显示隐藏。
复制链接

扫一扫

专栏目录