別のリンクをホバリングすると3つのリンクが表示されます

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:hoverが必要です。

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

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

それは擬似要素だからまた、それは、二つのコロンと::afterです。ほとんどのブラウザーはまだ1つのコロンの古い標準をサポートしていますが。
:hoverは疑似クラスなので、1つのコロンでうまくいきます。

編集：私は真剣に質問を誤解しているのを見ます。
:: afterテキストをクリック可能なリンク、またはむしろ3つにします。 CSSだけではそれができません。最初からhtmlに3つのリンクを置いて、それらをホバーに表示する必要があります。

ここに行きます。

.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>