html - CSS 选择器 a:link:hover

Question

我正在尝试创建我的网站，这样你就可以通过每个 div 中元素的颜色来判断你在哪里。该网站只有一页，当您单击打开该部分时，我使用 jQuery 滑出网站的部分（而不是单独的 .html）。

为了向他们展示他们打开了哪个部分，我将每个部分中的所有链接都设置为与打开该部分的文本相同的颜色。但是，我还希望拥有<a> </a>不是链接的标签，以便为网站添加一点色彩并吸引观众了解关键信息。出于这个原因，我只想将链接效果应用于<a> </a>实际上是链接的标签......所以我试过这个：

#box1 a{
    color: #68cff2;
}

#box1 a:link:hover{
    color: #ffffff;
    background-color: #68cff2;
}

这适用于背景颜色，因为它只会更改<a> </a>具有 href="..." 的背景颜色，但不会更改此类链接的字体颜色...有什么办法可以排序这个？

score 7 · Accepted Answer

:link伪类仅适用于未访问的链接，而不是所有链接。请记住，您也访问了要考虑的链接。您可能需要为访问的链接重复选择器，因为我注意到您还没有这样做：

#box1 a:link:hover, #box1 a:visited:hover {
    color: #ffffff;
    background-color: #68cff2;
}

（或者只是使用#box1 a[href]:hover，更多信息）

不过，我应该补充一点，您不应该使用<a>标签来标记不是链接也不能用作锚点的东西，只是为了“为网站添加一点色彩并吸引观众关注关键位的信息”。这不是他们的设计目的。更语义化的替代方案是<em>or <strong>，当然如果你不想要它，你必须删除斜体或粗体样式：

#box1 a, #box1 em {
    font-style: normal;
    color: #68cff2;
}

#box1 a:hover{
    color: #ffffff;
    background-color: #68cff2;
}

然后你不需要指定:link和:visited伪类，因为你基本上可以保证所有剩余的<a>元素都是链接。

score 3 · Accepted Answer

3

有需要a:link:hover{}吗？尝试使用 a:hover {}

于 2012-09-07T19:40:17.920 回答

score 1 · Accepted Answer

a:hover也会影响锚标签，如果它们的行为方式与链接相同，最终用户可能会感到困惑。

3 回答 3