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