Question

我的网站中有一个超链接，我希望成为#A0A0A0和#880000的{{1}}部分a:link，我希望它更改为部分{ {1}}和a:visited的{{1}}和部分#FFFFFF。但我希望它成为一个环节。到目前为止，我已尝试过两种解决方案，但都没有达到我想要的效果。

第一个是：

#AA0000

在此解决方案中，中间部分（“数组”）的颜色始终保持为a:hover，并且a:active或{{1}不会更改为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> }。

第二个解决方案是为字符串的每个部分创建一个#880000（一个用于'Dubious'，一个用于'Array'，一个用于'.net'）并且具有中间的css { {1}}

#AA0000

这种颜色很好用;但是字符串是三个单独的链接，因此鼠标悬停在一个链接上不会改变其他链接的颜色。

所以我希望能够做的是将超链接中间的css从:hover更改为:active然后再返回<a> </a>，但我不能弄清楚如何。这里有人可以解决我的问题吗？

谢谢，雅各布

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

Answer 2

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

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

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

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

3 个答案: