使用CSS完成悬停后如何淡出

时间:2013-06-02 01:35:57

标签: css css3 hover css-transitions css-animations

我有一张图像,当悬停时它的背景颜色会发生变化。

更改颜色需要1秒钟,但是一旦光标移出图像,它就会变回而没有任何影响。

如何淡出背景颜色?

CSS:

.latestTrack {
    margin:80px 0 0 0 !important;
}
.latestTrack img {
    float:right;
    margin-right:50px !important;
}
.latestTrack img:hover
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
    background-color:#f7710f;

}

HTML:

 <img src="img/SocIco/soundcloud-large.png" />

1 个答案:

答案 0 :(得分:13)

你忘记了缓和部分:

.latestTrack img {
   float:right;
   margin-right:50px !important;
   -webkit-transition: all 1s ease-out;
   -moz-transition: all 1s ease-out;
   -o-transition: all 1s ease-out;
   -ms-transition: all 1s ease-out;
   transition: all 1s ease-out;
}

jsFiddle example here.