鼠标悬停视频缩略图显示播放按钮

22年04月03日

大部分的视频网站显示视频集时，都是有一个精美的封面，当鼠标移动到某个视频时，视频封面上会出现一层类似于毛玻璃效果的，然后显示视频播放按钮。实现代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<style type="text/css">
        .play{
            width: 240px;
            height: 135px;
        }
        .play_ico{
            display: none;
        }
        .play_back{
            display: none;
        }
        .play:hover .play_ico{
            display: block;
            background-image: url(ico_play.png);
            height: 47px;
            width: 62px;
            background-position: 0px -58px;
            position: absolute;
            left: 89px;
            top: 50px;
            z-index: 1;
        }
        .play:hover .play_back{
            display: block;
            background: black;
            width: 240px;
            height: 135px;
            position: absolute;
            top: 8px;
            left: 9px;
            opacity: 0.5;
        }
    </style>

<div class="play">

<img src="sze.jpg" />
<div class="play_ico"></div>
<div class="play_back"></div>
</div>
<script type="text/javascript">
   
</script>

其中出现的图片自己按需要更换，ico_play.png为播放按钮，sze.jpg为视频封面。
实例下载：实现鼠标放在图片上显示一个播放图标

相关文章

给句点评吧！
loading