                        課程
                    
                        /前端開發
                        
                            /JavaScript
                        
                        /圖片展示特效

效果出不來

<!DOCTYPE?html>
<html>
	<head>
		<meta?charset="UTF-8">
		<title></title>
		
		<style>
			.box{?width:?245px;?height:?250px;overflow:?hidden;?float:?left;?position:?relative;}
			.box?a{width:?245px;?height:?250px;?display:block;position:?absolute;?top:?225px;?
			
			background:#000000;filter:alpha(opacity=50);-moz-opacity:0.5;-khtml-opacity:?0.5;??opacity:?0.5;?color:#FFFFFF;?}
		</style>
	</head>
	<body>
		<div?class="box">
			<img?src="../img/img1.jpg"?/>
			<a>?用于感冒引起的</br>頭痛、發熱、鼻塞、流涕、咽痛</a>
		</div>
		
		
		<div?class="box">
			<img?src="../img/img2.jpg"?/>
			<a>?用于感冒引起的</br>頭痛、發熱、鼻塞、流涕、咽痛</a>
		</div>
		
		
		<div?class="box">
			<img?src="../img/img3.jpg"?/>			
			<a>?用于感冒引起的</br>頭痛、發熱、鼻塞、流涕、咽痛</a>
		</div>
		<script?type="text/javascript">
		var?box?=document.getElementsByClassName("box")
		for?(var?i?=?0?;?i<box.length;?i++;)?
		{
		?box[i].onmouseover?=?showMeg
		?}
		}
		function?showMeg(){
			this.getElementsByTagName("a")[0].style.top?=?0
		}
			
		</script>
		
	</body>
</html>

a0a9l1

2016-08-09

源自：圖片展示特效 2-4

關注問題我要回答

1395

操作

收起

1 回答

DarkMage
2016-08-12

幫你改修正了下<!DOCTYPE html>
<html>
??? <head>
??????? <meta charset="UTF-8">
??????? <title></title>
??????? ?
??????? <style>
??????????? .box{ width: 245px; height: 250px;overflow: hidden; float: left; position: relative;}
??????????? .box a{width: 245px; height: 250px; display:block;position: absolute; top: 225px;
??????????? ?
??????????? background:#000000;filter:alpha(opacity=50);-moz-opacity:0.5;-khtml-opacity: 0.5;? opacity: 0.5; color:#FFFFFF; }
??????? </style>
??? </head>
??? <body>
??????? <div class="box">
??????????? <img src="../img/img1.jpg" />
??????????? <a> 用于感冒引起的</br>頭痛、發熱、鼻塞、流涕、咽痛</a>
??????? </div>
??????? ?
??????? ?
??????? <div class="box">
??????????? <img src="../img/img2.jpg" />
??????????? <a> 用于感冒引起的</br>頭痛、發熱、鼻塞、流涕、咽痛</a>
??????? </div>
??????? ?
??????? ?
??????? <div class="box">
??????????? <img src="../img/img3.jpg" />???????? ?
??????????? <a> 用于感冒引起的</br>頭痛、發熱、鼻塞、流涕、咽痛</a>
??????? </div>
??????? <script type="text/javascript">
??????? var box =document.getElementsByClassName("box")
??????? for (var i = 0 ; i<box.length; i++)
??????? {
???????? box[i].onmouseover = showMeg;
??????? ?
??????? }
??????? function showMeg(){
??????????? this.getElementsByTagName("a")[0].style.top = 0
??????? }
??????????? ?
??????? </script>
??????? ?
??? </body>
</html>