新手求教~不太理解為什么鼠標經過沒有變色,檢查了好多遍,請大家幫忙解惑下,謝謝~
<!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>
2016-01-13
#move a p你在這里吧顏色定死了。。
2015-08-04
變了才怪呢,你的#號和move有個空格,你還把img包在i里面,a是內聯元素,不能包塊元素,特殊情況除外,P是塊元素.
2015-08-04
#move a:hover{color:f00;}這段代碼沒有起效果。變為a:hove{#f00;}同樣沒有變化,為什么,哪里有問題?