Code placé dans HEAD
a: hover { background : none ; } a div { display: none ; }
a: hover div {
display: inline ;
position: absolute ;
top: 270px ;
left: 200px ;
width: 200px ;
height: 100px ;
background: black ;
text-align: center ;
color: yellow ;
}
- display avec valeur inline = induit un élément à générer une ou plusieurs boîtes en-ligne
- position "absolute" avec 270px du sommet et 200px du bord gauche
- la boîte est dimensionnée à (largeur) width: 200px ; et (hauteur) height: 100px ;
- boîte avec fond en noir et texte justifié en jaune.
Un calque invisible qui se trouve défini par le lien "a hover" , apparaît lors du survol de ce dernier.
Sommaire applications ... @ ... Sommaire CSS