How does text slowly change color on hover?

Question

I want to slightly change the color of the text as follows: http://trentwalton.com/2011/05/10/fit-to-scale/

Any ideas?

Answer 1

FIDDLE Working Demo

You can do this with 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; } 

Answer 2

Use CSS Transitions. Watch this: 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; } 

Answer 3

As @elclanrs says, or you can also use this.

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

Answer 4

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