<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
a{
display: block;
width: 448px;
height: 252px;
position: relative;
float: left;
margin:130px 20px;
}
.mask{
width: 100%;
height: 100%;
/* 设置透明和播放按钮的背景图片,不平铺,居中 */
background:rgba(0,0,0,0.4) url(images/arr.png) no-repeat center;
/* background-image: url(images/arr.png); */
position: absolute;
top: 0;
left: 0;
display: none;
}
a:hover .mask{
display:block ;
}
</style>
</head>
<body> <!-- 元素的显示与隐藏 -->
<a href="#"><img src="images/tudou.jpg" height="252" width="448" alt="">
<div class="mask"></div>
</a>
<a href="#"><img src="images/tudou.jpg" height="252" width="448" alt="">
<div class="mask"></div>
</a>
<a href="#"><img src="images/tudou.jpg" height="252" width="448" alt="">
<div class="mask"></div>
</a>
</body>
</html>