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 - ＆gt; a：已访问 - ＆gt; a：有效 - ＆gt; a：悬停是最佳排序。

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;
}

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

3 个答案: