问答详情
源自：2-4 深度代码优化

效果出不来

<!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 15:40

个回答

  • DarkMage
    2016-08-12 00:00:53

    帮你改修正了下<!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>

    1. 把 for (var i = 0 ; i<box.length; i++;)，改为 for (var i = 0 ; i<box.length; i++)，去掉i++后的'；'符号

    2. 把box[i].onmouseover = showMeg }多了个}，进行去除，如此可恢复正常

    0