[Corey_Chandler]

Hello everyone!

I'm trying to figure out how to get it so that when users hover over a visted link, the link will underline. I currently have a:link none (so that links won't be underlined), a:hover underline and a new color (so that the underline shows up and it changes color when hovering over a link) and a:visted none (so that visited links won't be underlined.

However, whenever I try it out, though the visited link does not have an underline and does change color when I hover over it, it doesn't underline!

What gives? Any help would be greatly appreciated.

- Corey

[der Kopf]

Your question is put a bit incomprehensible, but anyway, the correct way to underline a link when hovering is the following snippet (correct me if wrong):

A:hover {text-decoration:underline;}

Since links normally underline by default, you could also get this effect by taking away the underlining for ALL the other pseudo-classes of the A selector, in concreto:

A:link, A:visited, A:active, A:focus {text-decoration:none;}

I type this up since you don't really mention how you do what you wanted. You have to take into account the fact that many browsers offer less than acceptable performance when confronted with CSS. Explorer does good/best, and Safari isn't bad at all.

[Millennium]

Exactly what does your CSS code look like? In other words, what order do the :link, :visited, :hover, and :active selectors appear?

The problem is, all of these are considered equally specific (this is a problem; :hover and :active really should be considered more specific than :link and :visited, since the former presuppose the latter, but I digress). Because of this, you have to put the selectors in a specific order, or they won't work right.

Therefore, you should always do your rollover stuff in the following order: link, visited, hover, and active. Frankly, I think this is stupid; link-hover-active-visited makes much more sense because a given link will usually go through the states in this order, but because of the specificity problem I mentioned earlier this doesn't work.

[phidauex]

My website does exactly what you seem to be wanting to do. Here is the CSS code, pulled exactly from my page:

Code:
a:link {
	color: #000099;
	text-decoration: none;

}

a:visited {
	color: #9900FF;
	text-decoration: none
}

a:hover {
	text-decoration: underline;
	cursor: pointer;
	color: #0000CC;

}

a:active {
	color: #FF0000;
	text-decoration: none
}

a:link defines the color of the links, which is a dark blue, and it defines that there should be no text decoration.

a:visited changes the color to a purple, and retains the lack of decoration.

a:hover causes underlining, changes the color to a lighter blue, and changes the cursor to the 'pointer'.

a:active is just a red link, with no decoration.

A little note on the pointer business.. I have the following property in the body selector:

cursor: default;

That makes the cursor stay a pointer over the entire page. Then i specifically indicate that buttons (input:hover) and links should be the 'pointer' which is usually a little hand shape. That is because I dislike the little i-bar appearing over text that isn't normally selected or edited. the ibar, to me, suggests "Edit this!" but thats not the case with text on my page, so the default arrow makes more sense. I think it gives a page a subtle hint of cleanness and professionalism, and its supported in most modern browsers, and happily ignored in browsers that don't support it. Of course, the text can still be selected as normal, it just doesn't use the ibar cursor.

oh, check out the page at:
http://www.flexistentialist.org
to see the css in action. Feel free to check out the css file too, http://www.flexistentialist.org/main.css

All my code, except where I've used third party tools and scripts, is 'copyleft', and you are more than welcome to borrow code snippets for your site.

Peace,
sam