Fade Link Color

gotcha41

Feb 2 2005, 02:16 PM

hi, how do you make the linkcolor fade to another color when pointing your cursor to the link? It's a rather short description of my question, but i hope it's clear

.
More tips and tricks are welcome...

krap

Feb 2 2005, 03:05 PM

Put this is <head>:

CODE

Change red to whatever colour you want it to be.
Find more:
http://www.google.com/search?hl=en&q=hover+link+css

bjrn

Feb 2 2005, 03:34 PM

The order you put them in is important though. So remember, when if comes to pseudo classes: LoVe HAte (link, visited, hover, active)

cragllo

Feb 2 2005, 04:29 PM

The order is not importsnt is it? ive never had any problems...

bjrn

Feb 2 2005, 08:55 PM

I remember having problems with it some time ago. It might be mainly affecting IE, but I'm not sure (and not in the mood for testing), but quick google seems to indicate it's for (mainly) all browsers.
The point is that if you order it, for instance, like so:
link
active
hover
visited
then visited would override hover, and so when you would hover over a visited link you wouldn't see the hover style, because the visited style is declared later than the hover style and therefor overrides it.

I'm not sure I'm explaining properly, so I'll expand. I'll use a shorthand form (L means ":link" and so on).

When you have a link it will fall under just L and not under A, H or V. When the visitor has clicked on it, it becomes visited and falls under both L and V.
CSS works so that the last style declaration overrides older ones, so if you have
p { background-color:#fff; border:1px solid #f0f;}
p { background-color:#000; }
The background for 'p' would be #000 (black) with a #f0f (magenta) border, because last rule the parser encountered overrides any earlier rules. Same thing with pseudo classes like hover.

So, when the visitor has visited a link and then hovers over it, the link falls into L V and H! Oh dear! So the parser checks the styles for a:L, a:V and a:H and applies them in the order they are typed in the stylesheet.

At least I'm guessing that is what is/could be causing problems sometimes.

Of course if you don't want visited links to have hover styles then the appropriate order would be to have H before V. And I'm guessing you could (probably doesn't work in IE, but you never know) do something like:
a:link{...}
a:hover{...}
a:active{...}
a:visited{...}
a:visted:hover{...}
to get special styling for visited links you're hovering over.

ADD REPLY / Got an Opinion!	Remove these ADs!	RAPID SEARCH!	Free Web Hosting	[X]
Express your Opinions, Thoughts or Contribute more info. to help others. Ask your Doubts & Queries to get answers, So that "Together We can help others!"	Register FREE for AD-FREE forum, Create your own topics, Ask Questions, track topics, setup subscriptions & notifications and Get a Free Website w/ Email and FTP.		500MB Space No Ads, CPanel, FTP, PHP, MySQL, EMails - 100% FREE