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

大部分的视频网站显示视频集时，都是有一个精美的封面，当鼠标移动到某个视频时，视频封面上会出现一层类似于毛玻璃效果的，然后显示视频播放按钮。实现代码如下：<!DOCTYPE html><html><head><title></title><style type="text/css">.play{width: 240px;heig

jasmyn518

4921人浏览 · 2021-12-10 22:35:53

jasmyn518 · 2021-12-10 22:35:53 发布

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

<!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>