悬停在另一个 link 上时显示三个 link

Question

我想在我的页面上显示 "W3"。我希望当这个 "W3" 悬停时，"West Acton"、"North Acton" 和 "South Acton" 显示在 "W3" 前面并且所有这些都是可点击的 link s.

所以当我将鼠标悬停在 link 上时，我需要显示 3 个不同的 link。

例如：

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

Answer 1

删除选择器中的空格。 .classname :hover 表示位于具有 classname 的元素内的任何悬停元素。如果您想在悬停时定位 class 命名的元素本身，则需要 .classname:hover。

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

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

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

编辑：我发现我严重误读了问题。
您希望 ::after 文本是可点击的 link，或者更确切地说，是三个。 CSS 一个人做不到。您需要从一开始就将三个 link 放在 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>

Display three links when hovering on another link