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，它改变了关于哪些元素可以在其他元素内部的规则，你仍然不能拥有 in 锚点 - 它只是没有意义。

相反，您可以使用adjacent sibling selectors来执行此任务，方法是让弹出元素显示在文档标记中的锚点旁边而不是在其中。

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