View Full Version : fade between colours using css?

10-19-2004, 05:12 PM
Is it possible to use CSS to fade the colour of a link and background between to different colours when the user moves their mouse over it?

i.e. the default link will be a dark grey box with orange text and then when moused over it goes to a pale grey box and black text?

Many thanks in advance,

10-19-2004, 07:24 PM
a:link, visited {

color: #fc1;

background-color : #666;


a:hover {

color: #000;

background-color : #ccc;


Hope that helped :) .

10-19-2004, 07:52 PM
Thanks for the reply but I actually want it to fade between the two i.e. have a transition and not a sudden switch, can this be done? or am I gonna have to use flash?

Many thanks,

10-19-2004, 07:54 PM
I've never tried fading between different colours, but it might be possible, so I'd Google it - :( sorry I couldn't help.

10-19-2004, 09:34 PM
You could do a gif background image, just create the fade, and style your CSS to activate the other gif on rollover -- Safari does not animate gif background images, however -- and your only other bet is then flash.

10-19-2004, 10:14 PM
Or JavaScript..

10-19-2004, 10:27 PM
|V|[agnus']Or JavaScript..

Really? I need to learn more javascript - that would be a good alternative I think :)

10-19-2004, 10:33 PM
Yeah. I don't have a script handy, but I figure it would be some combination of manipulating the style object and use of setTimout() to iterate through the fade.

So like on mouse over you would use setTimeout() to call a function that, say, iterates the red value of an RGB set from 0 to 100 or something. You could of course adjust whatever color values you needed, but I think that basic approach would suffice.

10-20-2004, 08:47 AM
Thanks for you help. I did have a feeling I'd have to use Jscript or flash but i just thought I'd check.

Thanks again,