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.
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 :
Et voici le code HTML, directement à insérer dans votre page :
Et voici ce le résultat:
Sans le curseur:
Avec le curseur dessus:
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.
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 )
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 )
Ce document intitulé « Popup en CSS, sans Javascript » issu de Comment Ça Marche (www.commentcamarche.net) est mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, modifier des copies de cette page, dans les conditions fixées par la licence, tant que cette note apparaît clairement.
