我想在我的页面上显示“W3”。我希望当这个“W3”悬停时,在“W3”前面会显示“West Acton”,“North Acton”和“South Acton”,这些都是可点击的链接。当在另一个链接上悬停时显示三个链接
因此,当我将鼠标悬停在链接上时,我需要显示3个不同的链接。
例如:
.classname :hover : after {
content : "url 1" "url 2" "url 3" ;
}
我想在我的页面上显示“W3”。我希望当这个“W3”悬停时,在“W3”前面会显示“West Acton”,“North Acton”和“South Acton”,这些都是可点击的链接。当在另一个链接上悬停时显示三个链接
因此,当我将鼠标悬停在链接上时,我需要显示3个不同的链接。
例如:
.classname :hover : after {
content : "url 1" "url 2" "url 3" ;
}
在选择删除空格。 .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>
非常感谢您的帮助。这么简单。 – user3498119
好的。如果这是解决方案,您可以通过单击左侧的复选标记来标记它,因此问题不再显示在未解决问题列表中。 –
你能还包括与此问题相关的一些HTML代码?理解你所需要的会更容易。 – Alexei
有没有这样的HTML,但我会尽力详细解释。看我想在我的页面上显示“W3”。我希望当这个“W3”悬停时,West Acton - North Acton和South Acton在“W3”前面显示,所有这些都是可点击的链接。谢谢你的帮助。 – user3498119
像我可以单独点击西部阿克顿,南阿克顿等。我们可能需要使用JavaScript。谢谢。 – user3498119