CSS - Create a pop-up (no JavaScript)

Here's how to create a popup in CSS, without making use of JavaScript

Use :hover to switch CSS when moving the cursor.
Among the modified CSS attributes, use display:none to hide/show the popup, depending on the position of the cursor.

A popup with a link

The content of the popup is placed in a <span> tag within the <a> tag
Here is the CSS code to add in the <head> your html file or in a separate CSS file:
    z-index:24; background-color:#ddd; 

a.info:hover {z-index:25; background-color:#ff0} 

a.info span{display: none} 

a.info:hover span 
    top:2em; left:2em; width:10em; 
    border:1px solid #0cf; 
    background-color:#555; color:#fff; 

The HTML code to be inserted in your webpage:

    Voici un lien vers <a class="info" href="http://commentcamarche.net">CCM<span>Communauté d'assistance et de conseils high tech</span></a>. 

The results:

Without cursor:

With cursor:

A popup without link

If you just want to make a popup without any link, you can put href="#" in your <a> tag, but some browsers consider that "#" is a link to the top of the page.

To counter this, replace the <a> tag with a <span> tag (in HTML and CSS).
    z-index:24; background-color:#ddd;
    cursor: pointer;
Published by jak58. Latest update on May 14, 2013 at 06:15 AM by deri58.
This document, titled "CSS - Create a pop-up (no JavaScript)," is available under the Creative Commons license. Any copy, reuse, or modification of the content should be sufficiently credited to CCM (https://ccm.net/).
Skyblog - Display your title on two lines
Integrate - MSN chat on your website or blog