單擊鏈接後錨點懸停保持不變

Question

假設我想創建導航頂部菜單按鈕，每個按鈕都有錨標記並給出href。我有一個風格：盤旋到每個按鈕。當我點擊鏈接時，a：懸停在那個按鈕上，我點擊就消失了。我希望在點擊鏈接後錨點懸停保持不變。我最好在CSS中這樣做。

button a:hover { 
border:1px solid #000; 
box-shadow:1px 1px 0px 8px #1fb6dc; 
} 

Answer 1

試試這個：

button a:hover { 
    border:1px solid #000; 
    box-shadow:1px 1px 0px 8px #1fb6dc; 
    } 
button a:active 
{ 
     border:1px solid #000; 
     box-shadow:1px 1px 0px 8px #1fb6dc; 
     } 

Answer 2

你在你的CSS代碼錯誤的語法。 這裏是正確的解決方案：

a.button:hover { 
border:1px solid #000; 
box-shadow:1px 1px 0px 8px #1fb6dc; 
} 

a.button:active { 
border:1px solid #000; 
box-shadow:1px 1px 0px 8px #1fb6dc; 
} 

類的<a>的是button。

Answer 3

在你的問題，你已經使用了選擇：

button a:hover 

這是幾乎可以肯定不是你需要使用的選擇，這種選擇在其懸停狀態的元素中的元素。你可能也有.button類實際的鏈接，然後用選擇它們：

a.button：懸停

此選擇的元素在它的懸停狀態。

回到你的主要問題，在其「活動」或其「激活」後鏈接的樣式，您需要使用：活動pseudo-class selector。您還應該使用：焦點選擇器，以便僅使用鍵盤的人也能看到您的樣式更改。

a.button:hover, 
a.button:focus, 
a.button:active { 
    border: 1px solid #000; 
    box-shadow: 1px 1px 0px 8px #1fb6dc; 
} 

在這裏，我將所有選擇器鏈接在一起以節省重複樣式。你也可以這樣做，而不在那裏的「a」元素選擇（取決於你的其他的CSS）：

.button:hover, 
.button:focus, 
.button:active { 
    border: 1px solid #000; 
    box-shadow: 1px 1px 0px 8px #1fb6dc; 
} 

如果是這樣工作的，它會使你的CSS更靈活一點（見object oriented css） 。