Two Styles within One Link?

thedanster

12-13-2005, 08:23 PM

Hi,

I'm trying to get an effect, that I'm assuming will involve CSS on my website http://odg.danbeckett.co.uk

I am trying to get it so that the links in my right hand nav menu go from

x. link 1
o. link 2
x. link 3

to

x. link 1
o. link 2
x. link 3

when they are hovered over. I've been experimenting with css but not had much luck, can anyone help me out with this?

Thanks - Dan.

_Aerospace_Eng_

12-13-2005, 08:49 PM

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
.first {
color:#000;
}
.pink {
color:#FF0099;
}
a {
text-decoration:none;
}
a span.second {
display:none;
}
a:hover { /*allows displays to be changed*/
color:#000;
}
a:hover span.first{
display:none;
}
a:hover span.second{
display:inline;
}
</style>
</head>

<body>
<a href="#">
<span class="first"><span class="pink">x.</span> link 1</span>
<span class="second">x. <span class="pink">link 1</span></span>
</a>
</body>
</html>

thedanster

12-13-2005, 10:35 PM

thanks that worked a treat :D