I have a div tag called "footer", which I have applied a link style to (I only want this div tag to have this styling for the links). This is the CSS code I have written.

#footer a:link	{color: #030; text-decoration: underline;}

#footer a:hover	{color: #090; text-decoration: none;}

#footer a:visited {color: #030; text-decoration: underline;}

I want the visited link to be the same colour as the 'normal' link and also have the same styling as the hover link when the mouse moves over it. I have tried deleting the "a:visited" rule, but when I view the page in my internet browser it just shows the default style for visited links. But if I do it as above and view the page in my internet browser, when I hover my mouse over a link that I have visited, it doesn't use the same style as the "a:hover" link (which is what I want it to do).

 

Basically, when you have visited a link, I want it to behave exactly the same as the other links which haven't been visited (using the same styles, even when you hover over it). But I can't get the "a:visited" link, to follow the "a:hover" style.

 

Can it be done?

 

Thank you for any help.

Hi,

First thing is you need to get your link styles in order, a:hover needs to come after a:link and a:visited and to apply a hover state to a visited link is as easy as a:visited:hover, so..

a:link
a:visited
a:visited:hover
a:hover

 

link specificity - meyerweb(dot)com/eric/css/link-specificity(dot)html

Edited April 18, 201313 yr by Wynn

Hi,

 

First thing is you need to get your link styles in order, a:hover needs to come after a:link and a:visited and to apply a hover state to a visited link is as easy as a:visited:hover, so..

 

a:link

a:visited

a:visited:hover

a:hover

 

link specificity - meyerweb(dot)com/eric/css/link-specificity(dot)html

Thank you for your help, that worked. It did exactly as I wanted it to.