當在另一個鏈接上懸停時顯示三個鏈接

Question

我想在我的頁面上顯示「W3」。我希望當這個「W3」懸停時，在「W3」前面會顯示「West Acton」，「North Acton」和「South Acton」，這些都是可點擊的鏈接。

因此，當我將鼠標懸停在鏈接上時，我需要顯示3個不同的鏈接。

例如：

.classname :hover : after { 
content : "url 1" "url 2" "url 3" ; 
} 

Answer 1

在選擇刪除空格。 .classname :hover表示在內部的任何迴轉元件與classname的元件。如果要在懸停時尋址classname'd元素本身，則需要.classname:hover。

.classname:hover::after { 
 
    content : "url 1" 
 
}

<a href="#" class="classname">hover here </a>

此外，它::after爲兩個冒號，因爲它是一個僞元素。雖然大多數瀏覽器仍然支持一個冒號的舊標準。
:hover是一個僞類，所以它很好用一個冒號。

編輯：我看到我嚴重誤讀了這個問題。
你希望::之後的文本是一個可點擊的鏈接，或者說，三個。 CSS本身不能做到這一點。您需要從一開始就將這三個鏈接放在html中，然後在懸停時顯示它們。

你在這裏。

.container a {display:none} 
 
.container:hover a {display:inline}

<span class="container"> 
 
    hover here 
 
    <a href="#">link 1</a> <a href="#">link 2</a> <a href="#">link 3</a> 
 
</span>