Plus de popups en CSS - utilisation de plusieurs balises

Quelques popups de plus.

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 autre balise "inline" (en-ligne)

Presque tous les éléments "inline" peuvent être utilisés.

Par exemple :

Balise <b>

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 b.comment{
margin-left:20px;
display:none;
font-style:italic;
}
li a:hover.popup1 b.comment{
display:inline;
}

Balise <i>

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;
}

Balise <dfn>

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 dfn.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 dfn.comment{
visibility: visible;
}

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

Quelques popups de plus.

A l'intérieur d'une autre balise "inline" (en-ligne)

Balise <b>

Balise <i>

Balise <dfn>