<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
float: left;
margin-right: 10px;
margin-bottom: 10px;
}
div a{
display: block;
position: relative;
z-index: 0;
height: 170px;
margin-bottom: 10px;
}
div a span{
position: absolute;
width:300px ;
height: 170px;
right: 104%;/*若改为left:104%，就显示不出来了好像是被覆盖了*/
top: 0px;
background:gray ;
z-index: 22;
color: white;
line-height: 40px;
text-align: center;
filter:alpha(Opacity=50);/*IE6*/
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity:0.5;
-webkit-opacity:0.5;
display: none;
border: solid 4px #ff5500;
box-sizing:border-box;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div id="li1">
<a>
<img src="img/2.jpg">
<span>这是透明1</span>
</a>
</div>
<div id="li2">
<a>
<img src="img/1.jpg">
<span>这是透明2</span>
</a>
</div>
<div id="li4">
<a>
<img src="img/3.jpg">
<span>这是透明3</span>
</a>
</div>
<div id="li5">
<a>
<img src="img/1.jpg">
<span>这是透明2</span>
</a>
</div>
<div id="li6">
<a>
<img src="img/3.jpg">
<span>这是透明3</span>
</a>
</div>
<div id="li7">
<a>
<img src="img/3.jpg">
<span>这是透明3</span>
</a>
</div>
<div id="li8">
<a>
<img src="img/1.jpg">
<span>这是透明2</span>
</a>
</div>
<div id="li9">
<a>
<img src="img/3.jpg">
<span>这是透明3</span>
</a>
</div>
<script>
function show(){
var li=document.getElementsByTagName('div');
for(var i=0;i<li.length;i++){
if(i%4==0) {
li[i].getElementsByTagName('span')[0].style.right = "-104%";
}
}
for(var i=0;i<li.length;i++){
li[i].onmouseover = function () {
this.getElementsByTagName('span')[0].style.display = 'block';
}
li[i].onmouseout = function () {
this.getElementsByTagName('span')[0].style.display = 'none'
}
}
}
show()
</script>
</body>
</html>
