目录
一.案例介绍
鼠标经过盒子时显示遮罩 如图:
二.H5C3源码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.tudou {
width: 377px;
height: 210px;
margin: 30px auto;
position: relative;
}
.tudou img {
width: 100%;
height: 100%;
}
.mask {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .4)url(arr.png) no-repeat center;
}
/* 当鼠标经过盒子时,就让遮层显示出来 */
.tudou:hover .mask {
/* 显示元素 */
display: block;
}
</style>
</head>
<body>
<div class="tudou">
<div class="mask">
</div>
<img src="054F010164E948833D301CD88E69E2CA.jpg">
</div>
</body>
</html>
三.案例分析
- 盒子中央的箭头使用“父相子绝”的定位方法(.mask为子,.toudou为父)
- display:block不仅有转换块级元素的作用,还有显示display所隐藏元素的作用