Hover underline doesn't work once link is visited

[bill777]

The subject line pretty much describes the problem. Before the link is visited my underline appears when the user hovers their mouse over the hyperlink. Once the link takes on a 'visited state', the underline no longer appears when the user hovers over the hyperlink. This seems like it should be pretty straight forward but I'm obviously doing something wrong. Here is my code:

body
{
font-size: 10pt;
font-family: 'Trebuchet MS';
}
H1
{
font-size: 12pt;
font-family: 'Trebuchet MS';
}
A:hover
{
color: Maroon;
text-decoration: underline;
}

A:active
{
color: maroon;
text-decoration: none;
}
A:link
{
color: maroon;
text-decoration: none;
}
A:visited
{
color: maroon;
text-decoration: underline;
}

[Don_Hoagie]

Your CSS states that visited links should have an underline. Change the text-decoration parameter on visited links to "none", like the rest of your link states have. There is no "double underline"... if the link's already underlined when it's in visited state, then there will be no change on hover.

[D_Blackwell]

Also, pay attention to the order in which you call the link states. It can make a critical difference.

LoVeHAte

Link
Visited
Hover
Active

Especially message #4
http://www.webmasterworld.com/forum48/1505.htm [webmasterworld.com]

<comment>Thank goodness we've got Google back. It makes WebmasterWorld infinitely more useful.</comment>

[bill777]

Ok changed the code to this, and am still having the same problem:

A:link
{
color: maroon;
text-decoration: none;
}
A:visited
{
color: maroon;
text-decoration: none;
}
A:hover
{
color: Maroon;
text-decoration: underline;
}

A:active
{
color: maroon;
text-decoration: none;
}

[Don_Hoagie]

Well, that was definitely your problem, so...

How are you viewing your work? If you're uploading it via ftp and then viewing it, try a hard refresh your browser. The only other thing I can think of is that you have contradictory link styles somewhere else in the sheet, but that's doubtful.

Also, although this is an extremely simple case, a good strategy to use when having issues with CSS is to give the problem area a distinct color- that way, you'll know when you see it. Having each link style as "maroon" doesn't really tell you what status the link is... try making the "visited" state a lime green color- if the link doesn't turn lime green after you've clicked it, you know that's some issue on your end, not in the code. But, if it does turn lime green, AND there is a lime green underline, then you've got a problem with the code (in this case though, that's not going to happen).

[D_Blackwell]

Given that there isn't a lot going on in this, the code can be streamlined.

a {
color: red; text-decoration: none;
}
a:hover
{
text-decoration: underline;
}

[bill777]

Thanks Mr. Blackwell, changing the code to your snippet seems to have fixed that problem.

[ebemunk]

a can have a:hover and once its visited it becomes
a:visited
and so to add a hover effect to it you can call
a:visited:hover {
color: #whatever;
}