CSS悬停div链接

Question

我正在使用以下css创建一个弹出式菜单，其中包含用户悬停在特定链接上的信息。如何修改后续代码，以便用户可以点击跨度内的链接？截至目前第二个鼠标离开原始链接，div消失。

a:hover { 
position: relative; 
} 

a span { 
display: none; 
} 

a:hover span { 
color:#006699; 
display: block; 
position: absolute; 
width:190px; 
height:12px; 
top: -15px; 
left: 30px; 
padding: 5px; 
z-index: 100; 
} 

<a href=email.php>email<span>text</span></a> 

Answer 1

也就是说不你必须有有效的HTML - 块级p标签不能包含在内嵌a和span标签。即使你使用HTML5，它改变了有关哪些元素可以在其中的其他元素的规则，你仍然不能在锚内锚定- 它只是没有意义。

您可以做的是使用adjacent sibling selectors来完成这项工作，方法是让弹出式元素显示在文档标记中的锚点旁边，而不是在其内部。

但是，建议您使用JavaScript来控制网站的行为元素 - JavaScript还可以更好地控制弹出窗口的行为方式，并且通常更适合于此。