CSS Link question 1

[jisoo22]

Hello all!

I'm new to learning CSS so please bear with me. I'm creating a website where the links will have an overline when you hover the mouse pointer over them. I got that to work but the problem is that it doesn't do it for previously visited links. It seems that the "a:visited" segment completely overrides the "a:hover" segment. Does anyone know how to remedy that? I've posted that part of the code below.

Thanks a bunch!
Jisoo22

<style type=&quot;text/css&quot;>
<!--
body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #FFFFFF;
	background-color: #333366;
}
a:hover {
	color: #FFCC99;
    cursor: crosshair;
	text-decoration: overline;
}
a:link {
	color: #FFFFFF;
    cursor: crosshair;
	font-family: Arial, Helvetica, sans-serif;
	text-decoration: none;
}
a:visited {
	color: #3399CC;
	cursor: crosshair;
	text-decoration: none;
}
-->
</style>

 

[jisoo22]

P.S. I'm trying to avoid those underlines that typical links have. Everyone and their mom has those so I wanna stay away from them =)

 

[theocraticmind]

I'm not sure why it sould matter, but try this and see if it helps, I've changes the order, and added the active pseudo-class.

a:link {
color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
}
a:visited {
color: #3399CC;
cursor: crosshair;
text-decoration: none;
}
a:hover {
color: #FFCC99;
cursor: crosshair;
text-decoration: overline;
}
a:active {
color: #FFCC99;
cursor: crosshair;
text-decoration: overline;
}

 

[jisoo22]

Hey thanks it worked! It may have been that I didn't put in the "a:active" segment although I don't know exactly why it's so important. Appreciate the tip!

Jisoo22