persistent css hover popup
with css 'close button'
no javascript
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.
Special offer!
Lorem ipsum dolor sit amet, etc.
more
more
more
more
more
more
more
more
more
more
more
more
more
more
more
more
more
more
more
more
more
more
more
more
more
more
more
more
more
more
more
more
more
more
more
more
more
more
more
more
more
more
more
more
more
more
more
more
more
more
more
more
more
more
more
more
more
more
more
more
more
more
more
more
more
more
no more!
Sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
How it is done (4)
<div id="popupTrigger">
<div id="popupText">And here is the popup!</div>
<div id="popupContainer">
<div id="popupCloser"><span>X</span>Close</div>
<div id="popupContent">
<h4>Special offer!</h4>
<p>Lorem ipsum dolor sit amet, etc.</p>
</div>
</div>
</div>
For the closing bar a new <div id="popupCloser"> is made, and positioned above the popup-box, with a small gap beween (see source code for the css). You can see it on this page.
The trick: this #popupCloser bar is only functioning as teasing cheese for the mouse!
As soon as the mouse is above the border of the #popupContainer, he falls into the gap, where no
#popupContainer is. Then the hover must stop, and the popup disappears. The mouse never can reach the
bar, the button and the cheese. 
Also for the visitor the "close button" is just psychological: the button cannot be clicked, but when
on the road for the button, the hover collapses and the same aim as clicking on the button is achieved.
What rests is beautifying the styles (for instance in the demo a css3-transition is added).
- If is desired that the links on the page are still available when the popup is showed, then
you can add:
a { position: relative; z-index: 2;}. Then the popup will disppear as soon as you hover over a link in the page. - Not yet optimized for accessibility and responsive design.