CSS: Multiple Colours on single link - with hover 2

[starblood]

Is it possible to have one link split into different colours, and retain a hover function?

This snippet works with the colours, but the hover only affects the underline of the link:

<style type="text/css">
.white{font-family:arial;color:#cccccc}
.blue{font-family:arial;color:#0000ff}
A:hover{color:#000000}
</style>

<a href="#"><span class="white">white</span><span class="blue"> blue</span></a>

 

[patweb]

with CSS its is possible to define four positions (link, visited link, active link and normal hover). With the CSS I use, the color of the font is changing. You can even enlarge or shrink the size of the font. I defined this CSS as an external CSS.

A:link {font-size: 9px; background: #FFF8DC; color:#4B0082; text-decoration: none;}
A:visited {font-size: 9px; background: #FFF8DC; color:#4B0082; text-decoration: none;}
A:active {text-decoration: none}
A:hover {font-size: 9px; color:#fff8dc;}

regards, Pat.

 

[BillyRayPreachersSon]

starblood,

I don't believe it is possible to do what you're after. I tried splitting the link in two, but then the hover only affects one part. Ah well!

Hope this helps,
Dan

 

[Vragabond]

This is pretty poorly supported in IE, so beware. But it does work:

<style type="text/css">
a { font-family: arial; color: red; }
span.white { font-family: arial; color:#cccccc; }
span.blue { font-family: arial; color:#0000ff; }

a:hover { color: #000000; }
a:hover span.white { color: #000000; }
a:hover span.blue { color: #000000; }
</style>

<a href="#">red <span class="white">white</span><span class="blue"> blue</span></a>

I have added the default link color. This way you have three colors before changing to black on the hover. This is what you wanted, right? Note that it worked for me in IE6 and Mozilla but as I said, IE can act pretty random about it.

 

[starblood]

Thanks to all that replied.

Vragabond - that was exactly what I need - much appreciated!