案例:土豆网鼠标经过显示遮罩
目的:
- 练习元素的显示与隐藏
- 练习元素的定位
核心原理:
- 原先半透明的黑色遮罩看不见, 鼠标经过大盒子,就显示出来。
- 遮罩的盒子不占有位置, 就需要用绝对定位 和 display 配合使用。
鼠标经过显示遮罩的效果图:
代码:
方法1:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>仿土豆网显示隐藏遮罩案例</title>
<style>
.tudou {
position: relative;
width: 444px;
height: 320px;
background-color: pink;
margin: 30px auto;
}
.tudou img {
width: 100%;
height: 100%;
}
.tudou .mask {
/* 隐藏遮罩层 */
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .4) url(images/arr.png) no-repeat center;
}
/* 当我们鼠标经过了土豆这个盒子,就让里面的遮罩层显示出来 */
.tudou:hover .mask {
/* 显示元素 */
display: block;
}
</style>
</head>
<body>
<div class="tudou">
<div class="mask"></div>
<img src="images/tudou.jpg" alt="">
</div>
</body>
</html>
方法2:使用伪元素选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>仿土豆网显示隐藏遮罩案例</title>
<style>
.tudou {
position: relative;
width: 444px;
height: 320px;
background-color: pink;
margin: 30px auto;
}
.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(images/arr.png) no-repeat center;
}
/* 当我们鼠标经过了土豆这个盒子,就让里面的before遮罩层显示出来 */
.tudou:hover::before {
/* 显示元素 */
display: block;
}
</style>
</head>
<body>
<div class="tudou">
<img src="images/tudou.jpg" alt="">
</div>
</body>
</html>