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 - block 级 p 标签不能包含在内联 a 和 span标签。即使您使用的是 HTML5，它改变了关于哪些元素可以包含在哪些其他元素中的规则，您仍然不能在 inside anchor 中使用 anchor ——这没有意义。

相反，您可以使用 adjacent sibling selectors完成这项工作，方法是让弹出元素出现在文档标记中的 anchor 旁边，而不是在 anchor 内部。

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