当鼠标放到视频上会有阴影出现
思路分析:大盒子装隐藏阴影
<!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>
.Honor-kings {
position: relative;/* 子绝父相 */
width: 230px;
height: 140px;
background-color: pink;
margin: 100px auto;
}
.mask {
/* 隐藏遮罩层 */
display: none;
position:absolute;
top: 0;
height: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0, .8) url(imgs/arr.png) no-repeat center;
}
/* 鼠标经过视频时 ，里面的遮罩层显示*/
.Honor-kings:hover .mask {
display: block;
}
</style>
</head>
<body>
<div class="Honor-kings">
<div class="mask">
</div>
<img src="imgs/Honor-kings.jpg" alt="">
</div>
</body>
</html>成果展示:
鼠标经过后
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
