Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo.
Sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
<div id="popupTrigger">
<div id="popupText">And here is the popup!</div>
<div id="popupContainer"></div>
</div>
The trick: the #popupContainer is not yet the container with the real content of the popup, but an overlay, covering almost the whole page:
#popup:hover #popupContainer { top: 150px; left: 0; right: 0; bottom: 0; }
Because the #popupContainer is in the html inside the #popup, and the #popupContainer is widely overlapping the original #popup area, the hover over the #popupText is now taken over by the #popupContainer area. You can go everywhere in the #popupContainer without losing the hover!
The only way to escape from the hover is to go outside the #popupContainer area: in the top of the page or by leaving the browser window.
Now the real popup can be made inside the big #popupContainer. Inside = not losing the hover either.
- Go outside the #popupContainer for clicking on the next page!
< How it is done (1) | demo | How it is done (3) >