css - CSS 悬停弹出窗口

Question

我已经创建了这里给出的 CSS onHover 弹出窗口。但问题是，用户应该能够单击示例中的注册链接。在这里，当我从链接中移动鼠标感知时，弹出窗口消失了。谁能告诉它如何实现？

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;
}

演示

---

此外，如果你想让它适用于触摸屏（没有hover），你可以调整一下你的 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;
}

演示

Answer 2

将此添加到您的 CSS 中：

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

您的演示的修改版本：小链接。

Answer 3

这是一个工作示例链接。

放

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

代替

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

并将position: relative; top: 0px;css属性添加到.how .how-works.bubble-outer{ ... }