CSS - Create a pop-up (no JavaScript)

December 2016

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;

Related :

This document entitled « CSS - Create a pop-up (no JavaScript) » from CCM (ccm.net) is made available under the Creative Commons license. You can copy, modify copies of this page, under the conditions stipulated by the license, as this note appears clearly.