Question

I have created CSS onHover popup as given here. but problem is, User should be able to click the Register link in the example. here, Popup disappears as I move the mouse aware form the link.
Can anyone tell how it could be achieved ?

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>

Below CSS is used for onHover PopUp:

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

Answer 1

You can make it display on hovering the parent (.how), not just its preceding sibling. Hovering the parent happens when you are hovering any of its descendants (the link, .how-works, any of the children of .how-works).

To do this, change:

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

to:

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

DEMO

---

Also, if you want to make it work for touchscreens (no hover there), you could adjust a bit your HTML. Change

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

to

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

and add this to the CSS as well:

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

DEMO