我们都知道视频列表其实是一个封面列表，鼠标放上去时，有反馈：即hover时显示播放遮罩层，点击，跳转到对应的视频播放页。这是目前主流视频网站的一个通用效果。

我们在实现时应该理清思路：

1、每个视频位置处放的是封面图片

2、播放按钮遮罩层需完全覆盖封面图片，并且正常情况下是隐藏状态

3、鼠标hover时显示相应的遮罩层，离开时恢复正常

为了做出这个效果需要准备1张封面图片和1个播放按钮icon。

先来看下实现之后的效果

相关全部代码

<template><div class="cover-img"><div class="mask"></div><img src="../../assets/images/10.jpg" width="300" height="220" /></div>视频标题</template><script setup>
import {} from "vue";
</script><style lang="less" scoped>
.cover-img {