Travaux pratiques
TROISIÈME PARTIE
150
Afficher et masquer des éléments
C’est la pseudo-classe :hover qui nous ouvrira les portes des comportements dynamiques. La norme CSS 3, en cours d’élaboration, proposera d’autres pseudo-classes
telles que :target pour étoffer ces possibilités. Dans l’immédiat, le répertoire de
CSS se limite à réagir au survol d’objets par le pointeur de la souris.
Selon les besoins et les applications, on associera la pseudo-classe :hover aux déclarations display: none, display: block, ou display: inline.
Limitations dues aux navigateurs
La norme CSS 2 spécifie que la pseudo-classe :hover peut porter sur tout élément
du document. On peut donc imaginer des effets dynamiques se produisant lors du
survol d’une image, d’un titre de section, d’un paragraphe, d’éléments de liste, etc.
Dans la pratique, Internet Explorer 6 n’est capable d’appliquer :hover qu’à la seule
balise . Il l’ignorera dans tous les autres cas. Ce bogue est contraignant : il s’agit en
effet de rester compatible avec le plus grand nombre d’utilisateurs. C’est pourquoi nous
limiterons la portée des comportements dynamiques en CSS au seul élément .
L’élément en ligne peut toutefois jouer le rôle de conteneur et renfermer d’autres
éléments en ligne. Pour afficher et masquer une image, on la placera dans un élément
réagissant au survol de la souris.
Première application pratique
Dans un premier temps, illustrons simplement le fonctionnement général du survol
de lien. Le passage du pointeur de la souris au-dessus d’un lien doit provoquer
l’apparition d’une boîte verte ailleurs sur la page. Contrainte par ce qui précède à
occuper un élément en ligne , cette boîte ne pourra pas être de type bloc (
ne convient pas). Nous opterons donc pour le conteneur en ligne neutre .
Rappelons qu’un élément en ligne ne dispose pas de dimensions. Recourons aux
techniques présentées dans le chapitre portant sur le positionnement : les éléments
positionnés en absolu et en relatif et les éléments flottants se comportant comme des
blocs, ils pourront recevoir des dimensions. Nous transformerons ainsi un élément
en ligne en boîte verte dimensionnée et placée à l’endroit désiré.
INTERNET EXPLORER Application de :hover
La version 7 du navigateur de Microsoft corrige ce problème fâcheux et ouvre de nouveaux horizons aux
développeurs web.
TROISIÈME PARTIE
150
Afficher et masquer des éléments
C’est la pseudo-classe :hover qui nous ouvrira les portes des comportements dynamiques. La norme CSS 3, en cours d’élaboration, proposera d’autres pseudo-classes
telles que :target pour étoffer ces possibilités. Dans l’immédiat, le répertoire de
CSS se limite à réagir au survol d’objets par le pointeur de la souris.
Selon les besoins et les applications, on associera la pseudo-classe :hover aux déclarations display: none, display: block, ou display: inline.
Limitations dues aux navigateurs
La norme CSS 2 spécifie que la pseudo-classe :hover peut porter sur tout élément
du document. On peut donc imaginer des effets dynamiques se produisant lors du
survol d’une image, d’un titre de section, d’un paragraphe, d’éléments de liste, etc.
Dans la pratique, Internet Explorer 6 n’est capable d’appliquer :hover qu’à la seule
balise . Il l’ignorera dans tous les autres cas. Ce bogue est contraignant : il s’agit en
effet de rester compatible avec le plus grand nombre d’utilisateurs. C’est pourquoi nous
limiterons la portée des comportements dynamiques en CSS au seul élément .
L’élément en ligne peut toutefois jouer le rôle de conteneur et renfermer d’autres
éléments en ligne. Pour afficher et masquer une image, on la placera dans un élément
réagissant au survol de la souris.
Première application pratique
Dans un premier temps, illustrons simplement le fonctionnement général du survol
de lien. Le passage du pointeur de la souris au-dessus d’un lien doit provoquer
l’apparition d’une boîte verte ailleurs sur la page. Contrainte par ce qui précède à
occuper un élément en ligne , cette boîte ne pourra pas être de type bloc (
ne convient pas). Nous opterons donc pour le conteneur en ligne neutre .
Rappelons qu’un élément en ligne ne dispose pas de dimensions. Recourons aux
techniques présentées dans le chapitre portant sur le positionnement : les éléments
positionnés en absolu et en relatif et les éléments flottants se comportant comme des
blocs, ils pourront recevoir des dimensions. Nous transformerons ainsi un élément
en ligne en boîte verte dimensionnée et placée à l’endroit désiré.
INTERNET EXPLORER Application de :hover
La version 7 du navigateur de Microsoft corrige ce problème fâcheux et ouvre de nouveaux horizons aux
développeurs web.