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

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:hover::after {   
  content : "url 1"
}

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

此外，它是带有两个冒号的 ::after，因为它是一个伪元素。尽管大多数浏览器仍然支持一个冒号的旧标准。<​​br/>:hover 是一个伪类，所以最好用一个冒号。

编辑:我发现我严重误读了这个问题。
您希望::after 文本是一个可点击的链接，或者更确切地说，三个。单靠 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>