显示与隐藏——仿土豆视频
通过现实与隐藏，实现仿土豆视频的做法，即当鼠标经过图片时显示播放按钮，代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<style type="text/css">
a{
display: block; /*转换为块级元素，才能设置高度和宽度*/
margin: 100px;
width: 300px;
height: 200px;
position: relative;
}
.audio{
width: 300px;
height: 200px;
background:rgba(0,0,0,0.4) url(img/arr.png) no-repeat center;
position: absolute;
top: 0;
left: 0;
display: none;/*正常情况下不显示*/
}
a:hover .audio{/*鼠标经过a时,.audio显示出来*/
display: block;
}
</style>
<body>
<a href="#">
<img src="img/bg2.jpg" width="300px" height="200px"/>
<div class="audio"></div>
</a>
</body>
</html>
默认样式：
鼠标经过时样式：