CSS文本阴影导航问题答案

【问题标题】：CSS text-shadow navigation problemCSS文本阴影导航问题
【发布时间】：2011-04-27 23:01:42
【问题描述】：

我正在尝试使用 CSS3 文本阴影创建一个伪链接类，用于导航和正常使用链接。

问题是状态“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;
}

希望大家能帮帮我。

【问题讨论】：

标签： css

【解决方案1】：

在您的示例中，在 :visited 样式中指定“颜色”就足够了。

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

【讨论】：

我试过了，但结果还是一样。如果您将鼠标悬停在“E-mail: casper@sayhi.dk”链接上，这就是它应该显示的方式。
然后可能将 :visited 规则放在 :hover 之前。
你太棒了！我怎么没想到呢？

【解决方案2】：

这可能有帮助，也可能没有帮助，但我从不定义 a:link 样式。相反，我定义了一个“a”样式（没有伪类），并且样式可以很好地继承。然后我定义 :hover、:active 等...如果我没有为特定样式定义一个，则应用包罗万象的“a”样式。

定义 :hover 和 :focus 也是一种很好的做法。如果您愿意，它们可以是相同的样式。 :focus 被 iOS 和不使用鼠标但使用键盘导航的残障用户以有限的方式使用。

【讨论】：