如何讓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; 
}