CODEWITHSUNDEEP
htmlcolorshyperlink
Jacob de Lacey
Jacob de Lacey

Reputation: 278

How do I get two colors in one hyperlink?

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

Upvotes: 2

Views: 1394

Answers (3)

Jose Basilio
Jose Basilio

Reputation: 51468

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;}

Upvotes: 4

Sinan &#220;n&#252;r
Sinan &#220;n&#252;r

Reputation: 118128

<html>
<head>

<style type="text/css">

p { background: #00c }
a.menu:link    { color: #a0a0a0; text-decoration: none; }
a.menu:visited { color: #a0a0a0; text-decoration: none; }
a.menu:active  { color: #ffffff; text-decoration: none; }
a.menu:hover span.normal { color: #800 }
a.menu:hover span.hilite { color: #880 }

</style>

</head>

<body>

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

</body>
</html>

Upvotes: 1

SpliFF
SpliFF

Reputation: 38956

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

This tells the span what color to be when it's parent link is hovered.

Upvotes: 1

Related Questions