PopUps avec CSS - utilisation de span

Quelques popups avec CSS.

Quelques tests avec des liens dans plusieurs éléments HTML.

Code plus ou moins compatible avec :

MSIE 5, 5.5 et 6.
Mozilla, Firefox, Galeon, Epiphany, K-meleon, Netscape 6, 7 et 8.
Opera 7, 8 et 9.
Konqueror 3.2.

MSIE 5.x et 6 n'appliquent :hover qu'à un lien.
Néanmoins, si vous avez vraiment à appliquer :hover à un autre élément, un fichier .htc ou .hta peut modifier ce comportement.

A l'intérieur d'une balise span

popup 1 texte popup 1
popup 1 texte popup 1 et texte qui suit.

CSS pour popup1 :

li a:hover.popup1{
color:#0A00B0; /*pour MSIE*/
}
li a.popup1 span.comment{
margin-left:20px;
display:none;
font-weight:800;
font-style:italic;
}
li a:hover.popup1 span.comment{
display:inline;
}

popup 1b texte popup 1b
popup 1b texte popup 1b et texte qui suit.

CSS pour popup1b :

dt a:hover.popup1b{
color:#0A00B0;
}
dt a.popup1b span.comment{
margin-left:20px;
visibility:hidden;
font-weight:800;
font-style:italic;
background-color:#F4FBFF;
text-decoration:none;
}
html>body dt a.popup1b span.comment{
display:none;
}
dt a:hover.popup1b span.comment{
display:inline;
visibility:visible;
}

popup 2 texte popup 2

popup 2 texte popup 2 et texte qui suit.

CSS pour popup2 :

p a.popup2{
text-decoration:none;
font-weight:800;
}
p a.popup2 span.comment{
top:auto;
visibility:hidden;
text-decoration:none;
background-color:#D2E1FB;
z-index:10;
padding:0 2px;
border:1px solid #FAAAFF;
font-weight:normal;
font-size:.85em;
}
p a:hover.popup2{
color:#0A00B0;
}
p a:hover.popup2 span.comment{
visibility: visible;
}

popup 3 texte popup 3

popup 3 texte popup 3 et texte qui suit.

CSS pour popup3 qui donne des résultats différents et ne fonctionne pas avec Konqueror :

p a.popup3{
text-decoration:none;
font-weight:800;
}
p a.popup3 span.comment{
display:none;
text-decoration:none;
background-color:#D2E1FB;
z-index:10;
padding:0 2px;
border:1px solid #FAAAFF;
font-weight:normal;
font-size:.85em;
}
html>body p a.popup3 span.comment{
position:absolute;
}
p a:hover.popup3{
color:#0A00B0;
}
p a:hover.popup3 span.comment{
display:block;
}

popup 4 texte popup 4

popup 4 texte popup 4 et texte qui suit.

CSS pour popup4 (ne fonctionne pas avec Netscape avant la version 7.02) :

p a.popup4{
text-decoration:none;
font-weight:800;
}
p a.popup4 span.comment{
display:block;
visibility:hidden;
text-decoration:none;
background-color:#D2E1FB;
z-index:10;
padding:0 2px;
border:1px solid #FAAAFF;
font-weight:normal;
font-size:.85em;
}
p a:hover.popup4{
color:#0A00B0;
}
p a:hover.popup4 span.comment{
visibility:visible;
}

Suite

CSS / 3 colonnes / en-tête / pied de page

Quelques popups avec CSS.

A l'intérieur d'une balise span