Donnez votre avis

Popup en CSS, sans Javascript

Posez votre question

Voici comment réaliser une popup d'information en pure CSS, sans Javascript.

L'astuce est d'utiliser :hover de manière à utiliser des CSS différents au passage du curseur.
Parmis les attributs CSS modifiés, on utilise display:none afin de masquer/afficher la popup selon que le curseur se trouve dessus ou non.

Un popup sur un lien

Le contenu de la popup sera juste placé dans une balise <span> à l'intérieur de la balise <a>

Voici le code CSS, à mettre dans le <head> de votre fichier html ou dans un fichier CSS à part :

a.info
{
    position:relative;
    z-index:24; background-color:#ddd;
    color:#000;
    text-decoration:none
}

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

a.info span{display: none}

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

Et voici le code HTML, directement à insérer dans votre page :

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

Et voici ce le résultat:

Sans le curseur:

Avec le curseur dessus:

Un popup sans le lien

Si vous voulez juste faire une popup sans lien, vous pouvez mettre href="#" dans votre balise <a>, mais certains navigateurs considèrent que "#" dans un lien est le haut de la page, ce qui cause quelques désagréments lors de la navigation.

Pour contrer ceci, remplacez la balise <a> par une balise <span> (dans le HTML et dans le CSS). Cela fonctionne aussi.

Note : avec la balise <span>, vous n'avez pas la petite main du pointeur il suffit de modifier légèrement le CSS :

span.info
{
    position:relative;
    z-index:24; background-color:#ddd;
    color:#000;
    cursor: pointer;
}

Le résultat est le même, mais il n'y a pas de <a> inutile.

(Astuce d'origine: http://psacake.com/web/jl.asp )

Cet article est régulièrement mis à jour par des experts sous la direction de Jean-François Pillou, fondateur de CommentCaMarche et directeur délégué au développement numérique du groupe Figaro.

En savoir plus sur l'équipe CCM