Question

I have a hyperlink in my website that I want to be part #A0A0A0 and part #880000 for a:link and a:visited, and I want it to change to part #FFFFFF and part #AA0000 for a:hover and a:active. But I want it to be all one link. I have tried two solutions so far, but neither worked out the way I want.

The first was:

a.menu:link { color: #a0a0a0; text-decoration: none; }

a.menu:visited { color: #a0a0a0; text-decoration: none; }

a.menu:hover { color: #ffffff; text-decoration: none; }

a.menu:active { color: #ffffff; text-decoration: none; }

<a class="menu" href="/about.html">Dubious
    <span style="color: #880000;">Array</span>
.net</a>

In this solution, the color of the middle part (‘Array’) stays as #880000 the whole time and doesn’t change to #AA0000 for :hover or :active.

The second solution was to create a <a> </a> for each part of the string (so one for ‘Dubious’, one for ‘Array’ and one for ‘.net’) and have the css for the middle <a> </a> be

a.redMenu:link { color: #880000; text-decoration: none; }

a.redMenu:visited { color: #880000; text-decoration: none; }

a.redMenu:hover { color: #AA0000; text-decoration: none; }

a.redMenu:active { color: #AA0000; text-decoration: none; }

The colors worked fine this way; but the string was three separate links, so mousing over one link wouldn’t change the color in the others.

So what I want to be able to do is to change the css in the middle of a hyperlink from a.menu to a.redMenu then back again to a.menu, but I can’t work out how. Can anyone here solve my problem?

Thanks, Jacob

Answer 1

You can use your original HTML, just remove the inline style:

<a class="menu" href="/about.html">
 Dubious<span>Array</span>.net
</a>

Then simply add these css declarations for span:

a.menu:link span, a.menu:visited span{color: #880000;}
a.menu:hover span, a.menu:active span {color: #aa0000;}