鼠标悬停显示视频播放按钮
大部分的视频网站显示视频集时,都是有一个精美的封面,当鼠标移动到某个视频时,视频封面上会出现一层类似于毛玻璃效果的,然后显示视频播放按钮。实现代码如下:<!DOCTYPE html><html><head><title></title><style type="text/css">.play{width: 240px;heig
·
大部分的视频网站显示视频集时,都是有一个精美的封面,当鼠标移动到某个视频时,视频封面上会出现一层类似于毛玻璃效果的,然后显示视频播放按钮。实现代码如下:
<!DOCTYPE html>
<html>
<head>
<title></title>
<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>
</head>
<body>
<div class="play">
<img src="sze.jpg">
<div class="play_ico">
</div>
<div class="play_back">
</div>
</div>
</body>
<script type="text/javascript">
</script>
</html>
其中出现的图片自己按需要更换,ico_play.png为播放按钮,sze.jpg为视频封面。
更多推荐
所有评论(0)