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>
First a container for all the popup matter is created: <div id="popupTrigger">. In this div are 2 other containers: the #popupText and the #popupContainer. The #popupText has the style of a normal link (but it's not a link, it's just a hover area!). The #popupContainer is hidden, with an absolute position.
The #popupTrigger has a block character, and a hover can be made over the whole width of this div. We only need the hover on the #popupText. Therefore the #popup has to be shrinked to the width of the #popupText. That can be realised by floating the #popup. Another way is to give the #popup a distinct width (in em, then font-scaling by the visitor can't hurt).
If the #popupTrigger is hovered, the #popupContainer can come into live. Normally for a css-popup the popup is showed somewhere besides the trigger:
#popup:hover #popupContainer { top: 150px; left: 30%; right: 30%; height: 50%; }
The result: if you leave the hover over the trigger, the popup disappears.
You can try it on this page.
< demo | How it is done (2) >