                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /圖片展示特效

為什么我讓隱藏的文字塊顯示在原本位置的右邊不行，顯示在左邊就可以？具體疑問見代碼注釋

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