Question

我已经按照here创建了CSS onHover弹出窗口。但问题是，用户应该可以单击示例中的注册link。在这里，当我将鼠标移动到链接时，Popup消失了。谁能说出如何实现呢？

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

另外，如果你想让它适用于触摸屏（那里没有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;
}

DEMO

Answer 2

将此添加到您的CSS：

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

您演示的修改版本：little link。

Answer 3

以下是一个工作示例link。

把

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

而不是

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

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

CSS onhover Popup

3 个答案:

DEMO