如何在一个超链接中获得两种颜色？答案

【问题标题】：How do I get two colors in one hyperlink?如何在一个超链接中获得两种颜色？
【发布时间】：2009-05-26 01:00:58
【问题描述】：

我的网站中有一个超链接，我想成为#A0A0A0 和a:link 和a:visited 的一部分，我希望它变成#FFFFFF 和#AA0000 的一部分a:hover 和 a:active。但我希望它是一个链接。到目前为止，我已经尝试了两种解决方案，但都没有达到我想要的效果。

第一个是：

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>

在此解决方案中，中间部分（'Array'）的颜色始终保持为#880000，对于:hover 或:active，不会更改为#AA0000。

第二个解决方案是为字符串的每个部分创建一个<a> </a>（所以一个用于“Dubious”，一个用于“Array”，一个用于“.net”）并为中间的<a> </a>创建一个css是

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

这样颜色效果很好；但该字符串是三个单独的链接，因此将鼠标悬停在一个链接上不会改变其他链接的颜色。

所以我想做的是将超链接中间的 css 从 a.menu 更改为 a.redMenu 然后再返回到 a.menu，但我不知道怎么做。有人可以解决我的问题吗？

谢谢，雅各布

【问题讨论】：

标签： html colors hyperlink

【解决方案1】：

你可以使用你原来的 HTML，只是去掉内联样式：

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

然后简单地为 span 添加这些 css 声明：

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

【讨论】：

【解决方案2】：

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

这告诉 span 当它的父链接悬停时是什么颜色。

【讨论】：

【解决方案3】：

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

【讨论】：