CSS悬停问题

请看这把小提琴

悬停标题（h2）后，显示div元素（弹出窗口），符合设计要求。 但是我无法导航到新div（新div在移出h2元素后很快就会消失）

是否对此有任何修复，以便用户可以单击头枕，然后可以单击另一个div元素的触点

HTML

<h2>What is CSS?</h2>
<div id="popup">
  <a href="#">Contact</a>
</div>

---

只需更改悬停伪选择器规则，将#popup元素也包括在内（假设您的目标只是能够单击#popup中的联系人链接）

---

如果您想使用这种方法，我建议在h2元素中添加填充，以允许您的鼠标离开它，而无需立即停用悬停状态，或使用更大的不可见元素将其包装。

另一种方法是在h2中添加弹出窗口并绝对定位它。 这样，当您在弹出窗口上悬停时，您也将在h2上悬停。 这里需要注意的一点是，不要像ReeceJHayward建议的那样在h2和弹出窗口之间留下任何空格

<h2>What is CSS?
<div id="popup">
    <a href="#">Contact</a>
</div>
</h2>

什么是CSS？ 演示：

---

如果您想单击而不是悬停，则需要Javascript/JQuery。谢谢，Paulie，是的，可以使用JQuery完成。但在这里，我正在寻找CSS透视图…那么你就不走运了…如果你想点击，你必须使用JS。类似的东西可以做到，但HTML标记仍有待改进。这个标记的语义并不像你原来的文章那样，Avin将弹出div作为标题的子项，而不是兄弟项。将标题悬停时，弹出窗口显示（使标题展开）。然后，当您悬停弹出窗口时，您仍然在标题中（因为它是父项）。希望你能理解@PravinVaichal：在HTML5中，允许使用div，即使是在内联元素中（例如a

p

或

a

）。然而，我也不喜欢它…需要非常精确的鼠标移动来确保悬停不会从

h2

@Paulie\u D上脱落-悬停一脱落弹出窗口就会隐藏。如果你不介意额外的绿色，你可以给你的h2添加上下填充。简单有效的解决方案+1.

h2:hover+ #popup, #popup:hover{
   display:inline-block;
}

<h2>What is CSS?
<div id="popup">
    <a href="#">Contact</a>
</div>
</h2>