Popup en CSS, sans Javascript
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="https://www.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 )