如何使 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

如此处所述，:hover 声明必须位于 :visited 和 :active 声明之后。

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

Answer 2

您的

a:hover

声明必须位于样式表中的声明之后，

a:visited

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

a:链接-> a:访问过-> a:活动-> 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;
}