<!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>
.tudo {
position: relative;
width: 444px;
height: 320px;
background-color: pink;
/* 标准流实现水平居中 */
margin: 100px auto;
}
.tudo img {
width: 100%;
height: 100%;
}
/* 设置遮罩中央的播放按钮 */
.tudo .t1 {
/* 隐藏遮罩层 */
display: none;
position: absolute;
width: 100%;
height: 100%;
/* 1.设置背景遮罩 2.设置遮罩上的图标 3.取消图标的自动铺满 4.设置居中 */
background: rgba(0, 0, 0, 0.4) url(../img/arr.png) no-repeat center;
}
.tudo:hover .t1 {
/* 显示元素 */
display: block;
}
</style>
</head>
<body>
<div class="tudo">
<div class="t1"></div>
<img src="https://r1.ykimg.com/050C00005F50535E04763610260E5A8B" alt="">
</div>
</body>
</html>
实现鼠标移入后显示遮罩和图标
最新推荐文章于 2023-12-01 12:58:10 发布