1 reply to this topic

[DanBeckett]

anyone know how to make a text link that has seperate colors? on my website (here) I'm trying to get the nav links to do this:

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

with the x's and o's pink, and the other text white, but when they are hovered over the colours swap so the x/o's are white and the other text is pink.

thanks - Dan.

[rc69]

With the proper positioning of the span tag, the rigth selector, and possibly some JavaScript yes.

Short incomplete example:

<style type="text/css">
#nav a {
	color:white;
}

#nav a span {
  color:pink;
}
</style>
<a href="/"><span>x.</span> link1</a>

That should be a start. You can do some testing with :hover and get back to us. And no, there's no super-easy way to do this, it's either my way, or some other (possibly far more complex) way.
Also, the JavaScript i mentioned might be needed to change the color of the <span> tag correctly.

note: #nav is something i made up. I recommend adding the id to a div around your links just for this purpose (unless you want all links to behave this way).

Edited by rc69, 13 December 2005 - 05:24 PM.