Afficher et masquer
CHAPITRE 11
151
Voici la structure HTML du lien réagissant au survol :
L’élément est placé dans une déclaration de lien qui porte ici sur la page
courante (href="#"). Sans mise en forme CSS, ce lien s’affiche tel qu’en figure 11-1.
Masquons l’élément pour le rendre invisible par défaut. Pour cela, le chapitre
portant sur le préchargement d’images propose deux méthodes : la règle display:
none ou le placement hors du champ visible. Équivalentes dans leurs effets, elles diffèrent beaucoup dans leur mise en place. Nous retiendrons par conséquent la technique la plus simple : display: none.
Le code CSS suivant masquera les balises situées dans des liens :
Attribuons la règle display: inline (ou block) aux zones contenues dans
des liens survolés :
On obtient ainsi le comportement désiré : au repos, seul le texte « Survolez pour voir
la boîte » est affiché. Quand le pointeur de la souris survole ce lien, la partie « texte et
images peuvent être placés ici » apparaît. Seul le navigateur Internet Explorer ne
Survolez pour voir la boîte texte et images peuvent
être placés ici
Figure 11–1
Comportement
dynamique en CSS (I)
COMPROMIS Théorie et pratique du display: none
La méthode du display: none est sans conteste la plus élégante. Pour masquer un
élément, il est plus naturel de spécifier de cacher l’objet que de « bidouiller » à base
de déplacements de l’objet hors de la zone visible.
Dans le chapitre consacré aux images réactives et aux menus graphiques, nous aborderons toutefois les limites de cette instruction : le manque de conformité de certains
navigateurs non graphiques aux recommandations de la norme.
a span {
display: none;
}
a:hover span {
display: inline;
}