html - 仅为前景文本颜色应用过渡。不适用于背景图像

Question

有没有办法只对文本颜色使用 css3 过渡？

假设我有一个 readmore 类，它有一些过渡效果，比如

.readmore{
    colour:red;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -o-transition: all .3s ease-out;
    transition: all .3s ease-out;
    background:url(images/sprite.png) no-repeat 0 0;

}



.readmore:hover{
    colour:red;
    background:url(images/sprite.png) no-repeat 0 -20px;
}

现在我不想应用背景图像转换。我只需要为颜色应用过渡。因为当我们将鼠标悬停在文本上时，图像是动画的，看起来不太好。

有什么建议吗？提前致谢。

Answer 1

您可以指定您只想转换color 属性，而不是指定您要转换所有 属性。

像这样:

transition: color .3s ease-out; 

并将colour更改为color。

希望这对您有所帮助!