Pure CSS PopUps tests - using different tags

Some more popups.

A few tests on links in different HTML elements.

Code more or less compatible with:

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

MSIE 5.x and 6 only understand :hover when applied to a link.
However, if you really need :hover on another element, .htc or .hta files can modify this behavior.

In other "inline" tags

The majority of "inline" elements can be used.

For example:

In <b>

popup 1 text popup 1
popup 1 text popup 1 and some text.

CSS for popup1:

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

In <i>

popup 1b text popup 1b
popup 1b text popup 1b and some text.

CSS for popup1b :

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

In <dfn>

popup 2 text popup 2

popup 2 text popup 2 and some text.

CSS for 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 columns / header / footer

Some more popups.

In other "inline" tags

In <b>

In <i>

In <dfn>