Using only CSS, show div on hover over

Question

I would like to show a div when someone hovers over an element, but I would like to do this in CSS and not JavaScript. Do you know how this can be ach

Answer 1

I would like to offer this general purpose template solution that expands on the correct solution provided by Yi Jiang's.

The additional benefits include:

• support for hovering over any element type, or multiple elements;
• the popup can be any element type or set of elements, including objects;
• self-documenting code;
• ensures the pop-up appears over the other elements;
• a sound basis to follow if you are generating html code from a database.

In the html you place the following structure:

In the css you place the following structure:

div.information_popup_container {
position: absolute;
width:0px;
height:0px;
/* Position Information */
/* Appearance Information */
}
div.information_popup_container > div.information {
/* Position Information */
/* Appearance Information */
}
div.information_popup_container > div.popup_information {
position: fixed;
visibility: hidden;
/* Position Information */
/* Appearance Information */
}
div.information_popup_container > div.information:hover + div.popup_information {
visibility: visible;
z-index: 200;
}

A few points to note are:

1. Because the position of the div.popup is set to fixed (would also work with absolute) the content is not inside the normal flow of the document which allows the visible attribute to work well.
2. z-index is set to ensure that the div.popup appears above the other page elements.
3. The information_popup_container is set to a small size and thus cannot be hovered over.
4. This code only supports hovering over the div.information element. To support hovering over both the div.information and div.popup then see Hover Over The Popup below.
5. It has been tested and works as expected in Opera 12.16 Internet Explorer 10.0.9200, Firefox 18.0 and Google Chrome 28.0.15.

Hover Over The Popup

As additional information. When the popup contains information that you might want to cut and paste or contains an object that you might want to interact with then first replace:

div.information_popup_container > div.information:hover + div.popup_information {
visibility: visible;
z-index: 200;
}

with

div.information_popup_container > div.information:hover + div.popup_information 
,div.information_popup_container > div.popup_information:hover {
visibility: visible;
z-index: 200;
}

And second, adjust the position of div.popup so that there is an overlap with div.information. A few pixels is sufficient to ensure that the div.popup is can receive the hover when moving the cusor off div.information.

This does not work as expected with Internet Explorer 10.0.9200 and does work as expected with Opera 12.16, Firefox 18.0 and Google Chrome 28.0.15.

See fiddle http://jsfiddle.net/F68Le/ for a complete example with a popup multilevel menu.