<!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>
#move a p你在这里吧颜色定死了。。
变了才怪呢，你的#号和move有个空格，你还把img包在i里面，a是内联元素，不能包块元素,特殊情况除外，P是块元素.
#move a:hover{color:f00;}这段代码没有起效果。变为a:hove{#f00;}同样没有变化，为什么，哪里有问题？