Показывать три ссылки при наведении указателя мыши на другую ссылку

Question

Я хочу отобразить «W3» на моей странице. Я хочу, чтобы, когда этот «W3» завис, «West Acton», «North Acton» и «South Acton» отображаются перед «W3», и все это кликабельные ссылки.

Поэтому, когда я наводил ссылку на ссылку, мне нужно отобразить 3 разных ссылки.

Например:

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

Answer 1

Удалите пробелы в селекторе. .classname :hover означает любой зависающий элемент внутри элемент с classname. Вам нужно .classname:hover, если вы хотите обратиться к самому элементу classname'd при зависании.

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