on many sites, such as http://www.clearleft.com, you'll notice that when the links are hovered over, they will fade into a different color as opposed to immediately switching, the default action.
I assume JavaScript is used to create this effect, does anyone know how?
Nowadays people are just using CSS3 transitions because it's a lot easier than messing with JS, browser support is reasonably good and it's merely cosmetic so it doesn't matter if it doesn't work.
Something like this gets the job done:
a {
color:blue;
/* First we need to help some browsers along for this to work.
Just because a vendor prefix is there, doesn't mean it will
work in a browser made by that vendor either, it's just for
future-proofing purposes I guess. */
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
/* ...and now for the proper property */
transition:.5s;
}
a:hover { color:red; }
You can also transition specific CSS properties with different timings and easing functions by separating each declaration with a comma, like so:
a {
color:blue; background:white;
-o-transition:color .2s ease-out, background 1s ease-in;
-ms-transition:color .2s ease-out, background 1s ease-in;
-moz-transition:color .2s ease-out, background 1s ease-in;
-webkit-transition:color .2s ease-out, background 1s ease-in;
/* ...and now override with proper CSS property */
transition:color .2s ease-out, background 1s ease-in;
}
a:hover { color:red; background:yellow; }