悬停弹出窗口的 CSS

Question

我已经按照给定的方式创建了 CSS onHover 弹出窗口 here .但问题是，用户应该能够点击注册 link在这个例子中。在这里，当我从链接中移动鼠标时，弹出窗口消失了。 任何人都可以告诉它如何实现吗？

HTML:

<div class="how  f-left">
<h7><a href="how-it-works">How does this work?</a></h7>
<div class="how-works bubble-outer">
<div class="navigation-up-arrow"></div>
<div class="body">
<h4>How It Works</h4>
<ol class="bubble-inner">
<li>Tell Us What's Wrong </li>
    <li class="">  <a href="#">Register</a> to Get Quotes from Local Shopshere  </li>
<li class=" bold-txt ">Call Shop / Get Vehicle Serviced </li>
<li>Get Cash Back </li>
</ol>
</div>
</div>
</div>

下面的 CSS 用于 onHover PopUp:

.how h7:hover + .how-works {
    display: block;
}

Answer 1

您可以让它显示在鼠标悬停在父级 (.how) 上，而不仅仅是它前面的兄弟级。当您悬停其任何后代(链接，.how-works，.how-works 的任何子级)时，就会悬停父级。

为此，更改:

.how h7:hover + .how-works {
    display: block;
}

到:

.how:hover .how-works {
    display: block;
}

DEMO

---

此外，如果您想让它适用于触摸屏(没有悬停)，您可以稍微调整一下您的 HTML。改变

<h7><a href="how-it-works">How does this work?</a></h7>

到

<a class="how-it-works" href="#" tabindex="1"><h7>How does this work?</h7></a>

并将其添加到 CSS 中:

.how-it-works:focus + .how-works {
    display: block;
}

DEMO