如何让文字在悬停时慢慢改变颜色？答案

【问题标题】：How to make text slowly change color on hover?如何让文字在悬停时慢慢改变颜色？
【发布时间】：2013-05-16 23:53:57
【问题描述】：

我想让我的文字像这样慢慢改变颜色： http://trentwalton.com/2011/05/10/fit-to-scale/

有什么想法吗？

【问题讨论】：

CSS3 过渡并让它优雅地降级。

标签： javascript css css-transitions

【解决方案1】：

Working FIDDLE Demo

您可以使用CSS Transitions：

a {
    color: lime;
    -webkit-transition: color 1s;
    -moz-transition:    color 1s;
    -ms-transition:     color 1s;
    -o-transition:      color 1s;
    transition:         color 1s;
}

a:hover {
    color: red;
}

【讨论】：

【解决方案2】：

使用 CSS 过渡.. 看到这个：Fiddle

a {
  color: #000000;
}
a:hover {
   color: #E24B3B;
}
ul a {
 -webkit-transition: color 0.2s ease-out;
 -moz-transition: color 0.2s ease-out;
 -o-transition: color 0.2s ease-out;
 -ms-transition: color 0.2s ease-out;
 transition: color 0.2s ease-out;
 }

【讨论】：

【解决方案3】：

正如@elclanrs 所说，或者您也可以使用它。

$("selector").hover(function(){
    // your code to fade in or fade out ....
});

【讨论】：

他没说他用的是jQuery
@Alex : 是的，你是对的......我只是给了他另一个选择，如果他想使用的话。

【解决方案4】：

试试

a {
  color: red;

-webkit-transition: color 0.2s ease-out;
 -moz-transition: color 0.2s ease-out;
 -o-transition: color 0.2s ease-out;
 -ms-transition: color 0.2s ease-out;
 transition: color 0.2s ease-out;
}
a:hover {
   color: blue;
}

【讨论】：