大部分的视频网站显示视频集时,都是有一个精美的封面,当鼠标移动到某个视频时,视频封面上会出现一层类似于毛玻璃效果的,然后显示视频播放按钮。实现代码如下:
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为视频封面。
实例下载:实现鼠标放在图片上显示一个播放图标