Question

请参考这个小提琴，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元素中添加填充，以允许鼠标离开它而不立即停用悬停状态，或用更大的不可见元素包裹它。

Answer 2

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

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

样本： http://jsfiddle.net/79AfQ/7/

CSS悬停问题

2 个答案: