0

hereのように 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;
}
4

3 に答える 3

4

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

デモ

于 2012-09-11T12:11:54.730 に答える
2

これを CSS に追加します。

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

デモの修正版: little link。

于 2012-09-11T12:13:45.483 に答える
0

これが実際のリンク例です。

置く

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

それ以外の

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

position: relative; top: 0px;cssプロパティを追加します.how .how-works.bubble-outer{ ... }

于 2012-09-11T12:19:43.753 に答える