不明白为什么鼠标放上去图标向上消失然后就不出来了，再放一次才会有时候出来有时候不出来
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset = "utf-8">
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#move {
width: 300px;
height: 170px;
margin: 10px auto;
border: 1px solid #ccc;
}
#move a {
display: inline-block;
width: 58px;
height: 25px;
border: 1px solid #ddd;
border-radius: 3px;
background-color: #fff;
text-align: center;
margin: 10px 17px;
position: relative;
padding-top: 40px;
color: #9c9c9c;
font-size: 12px;
text-decoration: none;
line-height: 25px;
overflow: hidden;
}
#move a i {
position: absolute;
top: 20px;
left: 0;
display: inline-block;
width: 100%;
text-align: center;
opacity: 1;
filter: Alpha(opacity=100);
}
#move img {
/*padding: 3px 0;*/
border: none;
/*z-index:-1*/
}
#move a:hover {
color: #f00;
}
</style>
<script type="text/javascript" src="运动框架.js"></script>
<script type="text/javascript">
window.onload = function(){
var oMove = document.getElementById('move');
var aList = oMove.getElementsByTagName('a');
for (var i = 0; i < aList.length; i++) {
aList[i].onmouseover = function() {
var _this = this.getElementsByTagName('i')[0];
startMove(_this,{top:-25,opacity:0},function(){
_this.style.top = 30+'px';
startMove(_this,{top:20,opacity:100});
});
}
};
}
</script>
</head>
<body>
<div id="move">
<a href="#">
<i><img src="jsimages/food.png"></i>
<p>食物</p>
</a>
<a href="#">
<i><img src="jsimages/game.png"></i>
<p>游戏</p>
</a>
<a href="#">
<i><img src="jsimages/insurance.png"></i>
<p>保险</p>
</a>
<a href="#">
<i><img src="jsimages/lottery.png"></i>
<p>彩票</p>
</a>
<a href="#">
<i><img src="jsimages/movie.png"></i>
<p>电影</p>
</a>
<a href="#">
<i><img src="jsimages/travel.png"></i>
<p>旅游</p>
</a>
</div>
</body>
</html>
