Question

我正在尝试使用CSS3 text-shadow创建一个伪链接类，用于导航和正常使用链接。

问题是状态“a：hover”正在推翻“a：visited”，因此当鼠标悬停在先前访问过的链接上时，它会输出不同的内容。

如果CSS中没有a：visited状态，访问过的链接的颜色将变成标准的紫色，我不喜欢它。

查看网站：www.sayhi.dk

代码如下所示：

HTML

<a class="lnk" href="http://www.twitter.com/sayhidk">@Sayhi.dk</a>

CSS

a.lnk:link {
font-size: 12px;
font-weight: bold;
font-family: Myriad Pro;
text-shadow:1px 1px #ffffff;
color:#7c7565;
text-decoration:none;
}

a.lnk:hover {
    font-size: 12px;
    font-weight: bold;
    font-family: Myriad Pro;
    text-shadow: 1px 1px #7c7565;
    color:#ffffff;
}

a.lnk:visited {
    font-size: 12px;
    font-weight: bold;
    font-family: Myriad Pro;
    text-shadow:#ffffff 1px 1px 1px;
    color:#7c7565;
    text-decoration:none;
}

a.lnk:active {
    font-size: 12px;
    font-weight: bold;
    font-family: Myriad Pro;
    text-shadow:1px 1px #ffffff;
    color:#7c7565;
    text-decoration:none;
}

希望你们能帮助我。

Answer 1

在您的示例中，在：visited样式中指定'color'就足够了。

修改：解决方案是将a.lnk:visited放在a.lnk:hover之前。

Answer 2

这可能有所帮助，也可能无效，但我从未定义过：链接样式。我改为定义一个“a”样式（没有伪类），并且样式很好地继承。然后我定义：hover，：active等等......如果我没有为特定样式定义一个，那么应用catch-all“a”样式。

定义a：hover以及a：focus也是一种好习惯。如果你愿意，它们可以是相同的风格。：重点是由iOS和残障用户以有限的方式使用，他们不使用鼠标但使用键盘进行导航。

CSS文本阴影导航问题

2 个答案: