CSS 悬停问题

Question

请引用这个 fiddle ，http://jsfiddle.net/shrikanth/79AfQ/

悬停标题(h2)后，显示 div 元素(弹出)，这是按照设计。但是我无法导航到新的 div。(新的 div 在移出 h2 元素后很快就会消失)

是否有解决此问题的方法，以便用户可以点击 headrer 然后点击另一个 div 元素的联系人？

HTML

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

CSS

h2 {
    position:relative;
    top:22px;
    left:44px;
    width: 170px;
    height:33px;
    text-align:center;
}
#popup {
    width: 240px;
    background: #727272;
    padding: 10px;
    border-radius: 6px;
    color: #FFF;
    position: relative;
    top:15px;
    left:44px;
    font-size: 12px;
    line-height: 20px;
    display:none;
}
h2:hover+ #popup {
    display:inline-block;
}
h2:hover {
    background-color:green;
}
#popup:before {
    content:"";
    display: block;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 0 15px 15px 15px;
    border-color: transparent transparent #727272 transparent;
    position: absolute;
    top: -15px;
    left: 92px;
}

Answer 1

只需更改悬停伪选择器规则以也包含#popup 元素(假设您的目标只是能够单击#popup 中的联系人链接)

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

如果你想使用这种方法，我建议向 h2 元素添加填充，让你的鼠标离开它时不会立即停用悬停状态，或者用更大的、不可见的元素包裹它。