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

【问题标题】：Display three links when hovering on another link悬停在另一个链接上时显示三个链接
【发布时间】：2016-08-25 08:08:44
【问题描述】：

我想在我的页面上显示“W3”。我希望当这个“W3”悬停时，“West Acton”、“North Acton”和“South Acton”显示在“W3”前面，所有这些都是可点击的链接。

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

例如：

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

【问题讨论】：

您能否也包含一些与您的问题相关的 HTML 代码？更容易理解您的需求。
没有这样的html，但我会尝试详细解释。看到我想在我的页面上显示“W3”。我希望当这个“W3”悬停时，West acton - North Acton 和 South Acton 显示在“W3”前面，所有这些都是可点击的链接。感谢您的帮助。
像我可以单独点击西阿克顿，南阿克顿等。我们可能需要使用javascript。谢谢。

【解决方案1】：

删除选择器中的空格。 .classname :hover 表示带有classname 的元素inside 的任何悬停元素。如果您想在悬停时处理类名元素本身，则需要.classname:hover。

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

&lt;a href="#" class="classname"&gt;hover here &lt;/a&gt;

另外，它是带有两个冒号的::after，因为它是一个伪元素。虽然大多数浏览器仍然支持一个冒号的旧标准。: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>

【讨论】：