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

你

a:hover 

声明必须跟从你

a:visited 

声明在样式表，因为访问的国家目前正在优先。总是将悬停放在样式声明块的末尾以防止出现这种情况。

a：链接 - > a：visited - > a：active - > a：hover是最优排序。

Answer 2

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

基本上，在您当前样式的级联中，您不会看到: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; 
}