javascript 如何使文本在悬停时慢慢改变颜色?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/16683143/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-27 05:37:30  来源:igfitidea点击:

How to make text slowly change color on hover?

javascriptcsscss-transitions

提问by user9124

I want to make my text change color slowly like this: http://trentwalton.com/2011/05/10/fit-to-scale/

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

Any Ideas?

有任何想法吗?

回答by

Working FIDDLE Demo

Working FIDDLE Demo

You can do it with CSS Transitions:

你可以用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;
}

回答by Anujith

Use CSS Transitions.. See this: Fiddle

使用 CSS Transitions.. 看这个: 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;
 }

回答by ShibinRagh

Try

尝试

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;
}

回答by Janak

As said by @elclanrs or you can also use this.

正如@elclanrs 所说,或者你也可以使用它。

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