如何使 HTML 链接显示悬停样式？

Question

我的 ASP.NET 母版页中有一些 HTML 标记，表示基本导航菜单。三个链接到三个页面的单词。我的 CSS 和 HTML 包含在下面供您参考。

当我加载页面时，链接以正确的颜色（红色）显示。如果我将鼠标悬停在链接上，链接会变为正确的颜色（蓝色）。到目前为止，我们很好。单击链接会将链接颜色更改为正确的颜色（黄色）。正如预期的那样，剩下的两个链接仍然是红色/蓝色。单击第二个链接也会将该链接更改为黄色。现在我有两个黄色链接。黄色链接都没有像我喜欢的那样显示悬停颜色（蓝色）。单击第三个链接也会使其变为黄色，并且没有任何链接显示悬停样式。

虽然点击了一个链接，但我希望存储颜色并显示悬停颜色。我该如何做到这一点？这是一个 ASP.NET Web 应用程序项目，但我现在只使用 HTML。

/* --- css --- */

a:link
{
    color: red;
    text-decoration: none;
}

a:hover
{
    color: blue;
    text-decoration: none;
}

a:active
{
    color: green;
    text-decoration: none;
}

a:visited
{
    color: yellow;
    text-decoration: none;
}



/* --- HTML --- */

<p class="MenuItems">
    <a href="1.aspx">Cars. </a>
    <a href="2.aspx">Trucks. </a>
    <a href="3.aspx">Vans. </a>
</p>

Answer 1

如 here 所述，:hover 声明必须在 :visited 和 :active 声明之后。

基本上，在您当前样式的层叠中，您永远不会看到:hover 颜色。

Answer 2

你的

a:hover

声明必须在您的

之后

a:visited

在样式表中声明，因为访问状态当前具有优先权。始终将鼠标悬停在样式声明块的末尾以防止这种情况发生。

a:link -> a:visited -> a:active -> a:hover 是最佳排序。

Answer 3

就用这个吧：

a:hover
{
    color: blue ! important;
    text-decoration: none ! important;
}

或如所述 - 使用此顺序：

a:link
{
    color: red;
    text-decoration: none;
}

a:active
{
    color: green;
    text-decoration: none;
}

a:visited
{
    color: yellow;
    text-decoration: none;
}

a:hover
{
    color: blue;
    text-decoration: none;
}