我的鼠标移入后图标会消失没问题，但移出后图标不回来，不清楚什么原因，求
1.Html代码
动画案例
*{
margin: 0;
padding: 0;
text-decoration: none;
}
#div1{
width: 288px;
height: 200px;
border: 1px solid #eaeaea;
margin: 10px auto;
}
#div1 a{
display: inline-block;
border-radius: 3px;
float: left;
width: 70px;
height: 65px;
border: 1px solid #eaeaea;
position: relative;
overflow: hidden;
}
#div1 a i {
position: absolute;
top: 0px;
left: 0px;
display: inline-block;
width: 100%;
text-align: center;
fliter: alpha(opacity: 100);
opacity: 1;
}
#div1 a p{
width: 70px;
height: 18px;
font-size: 12px;color: #3C3C3C;
text-align: center;
position: absolute;
top: 45px;
left: 0;
}
#div1 a:hover p{
color: red;
}
span{
display: inline-block;
margin-top: 11px;
width: 24px;
height: 24px;
background-image: url(../img/便名服务1.png);
background-repeat: no-repeat;
position: absolute;
top:0;
left: 20px;
}
.icon1{
background-position: 0 0;
}
.icon2{
background-position: 0 -44px;
}
.icon3{
background-position: 0 -85px;
}
.icon4{
background-position: 0 -132px;
}
.icon5{
background-position: 0 -176px;
}
.icon6{
background-position: 0 -220px;
}
.icon7{
background-position: 0 -264px;
}
.icon8{
background-position: 0 -308px;
}
.icon9{
background-position: 0 -352px;
}
.icon10{
background-position: 0 -396px;
}
.icon11{
background-position: 0 -440px;
}
.icon12{
background-position: 0 -484px;
}
<script>
window.onload = function(){
var oDiv =document.getElementById("div1");
var oSpan = document.getElementsByTagName("a");
for(var i=0;i0?Math.ceil(speed):Math.floor(speed);
//3.检测停止
if(icur != json[style1]){
flag = false;
}
if(style1 =="opacity"){
obj.style.filter ="alpha(opacity:"+(icur+speed)+")";
obj.style.opacity = (icur+speed)/100;
}else{
obj.style[style1] = icur+speed+"px";
}
}
if(flag){
clearInterval(obj.timer);
if(fn){
fn();
}
}
},30)
}
3.icon图片
4.码好之后的布局
5.鼠标移入之后的混乱现象
|
免责声明：本内容仅代表回答会员见解不代表天盟观点，请谨慎对待。
版权声明：作者保留权利，不代表天盟立场。
|
|
|
|
|
|
|
|
天盟APP下载
