Hi all,
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