效果图:
鼠标划过,显示视频遮罩层

.mask_item {
&::before {
content: "";
display: none;
position: absolute;
width: 285px;
height: 180px;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.25) url("../../assets/img/mask.png") no-repeat
center;
}
&:hover {
&::before {
display: block;
}
}
}
该代码段展示了如何使用CSS实现一个鼠标悬停时显示的视频遮罩层效果。通过添加伪元素`::before`,设置其在默认状态下为隐藏,然后在`:hover`状态下显示,背景包含半透明黑色和自定义图片,提供了一种增强网页交互性的方法。
686

被折叠的 条评论
为什么被折叠?



