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

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.

我在我的网站上有一个超链接,我希望成为#A0A0A0和部分#880000的a:link和a:visited,我希望它改为部分#FFFFFF和部分#AA0000为a:hover和a:active 。但我希望它成为一个环节。到目前为止,我已尝试过两种解决方案,但都没有按照我想要的方式解决。

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.

在此解决方案中,中间部分('Array')的颜色始终保持为#880000,并且不会更改为#AA0000:hover或: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

第二个解决方案是为字符串的每个部分创建一个 (一个用于'Dubious',一个用于'Array',一个用于'.net')并且具有中间的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; }

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?

所以我想要做的是将a.menu中的css更改为a.redMenu然后再返回a.menu,但我无法弄清楚如何。谁能在这里解决我的问题?

Thanks, Jacob

3 个解决方案

#1

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

您可以使用原始HTML,只需删除内联样式:

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

Then simply add these css declarations for span:

然后只需为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; }

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

这告诉跨度当父链接悬停时的颜色。

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

#1