新手求教~不太理解为什么鼠标经过没有变色,检查了好多遍,请大家帮忙解惑下,谢谢~
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JS动画案例</title>
</head>
<style>
* {
margin: 0;
padding: 0;
}
#move {
width: 480px;
height: 290px;
background: #ededed;
margin: 0 auto;
border: 2px solid #ccc;
}
#move a {
width: 100px;
height: 100px;
background: #fff;
border: 2px solid #c3c3c3;
position: relative;
float: left;
list-style: none;
display: inline-block;
margin: 16px 28px;
}
#move a img {
border: none;
width: 35px;
height: 35px;
}
#move a i {
width: 100%;
position: absolute;
top:20px;
left: 0;
display: inline-block;
text-align: center;
filter:alpha(opacity=100);
opacity: 1;
}
#move a p {
text-align: center;
position: absolute;
bottom: 20px;
width: 100%;
color: #969696;
}
# move a:hover {
color: #f00;
}
</style>
<script scr="move1.js"></script>
<script>/*
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});
}
}
}*/
</script>
<body>
<div id="move">
<a href="#"><i><img src="1.png"></i><p>彩票</p></a>
<a href="#"><i><img src="2.png"></i><p>电影</p></a>
<a href="#"><i><img src="1.png"></i><p>音乐</p></a>
<a href="#"><i><img src="2.png"></i><p>缴费</p></a>
<a href="#"><i><img src="1.png"></i><p>理财</p></a>
<a href="#"><i><img src="2.png"></i><p>理财</p></a>
</div>
</body>
</html>