当在另一个链接上悬停时显示三个链接

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>