Jump to content
xisto Community
gotcha41

Fade Link Color

Recommended Posts

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 :D .More tips and tricks are welcome...

Share this post


Link to post
Share on other sites

Put this is <head>:

<style type="text/css">A:link {text-decoration: none}A:visited {text-decoration: none}A:active {text-decoration: none}A:hover {text-decoration: underline; color: red;}</style>
Change red to whatever colour you want it to be.

Find more:

https://www.google.com/search?hl=en&q=hover+link+css

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.