HTML et CSS Chapitre 10
Effets dynamiques grâce au CSS

Les effets dynamiques regroupent des changements d'apparences lors d'événements particuliers de la part de l'utilisateur : au survol d'un élément, au clic, au focus (sélection) ou à la consultation d'un lien.

 10.1    Effet au survol

Pour pouvoir capter ces effets, il est temps d'introduire des éléments nouveaux du langage CSS : les pseudo-formats. Un pseudo-format s'applique à une balise, pour préciser dans quel contexte les paramètres vont s'appliquer. Par exemple, ici, un pseudo-format spécifique existe pour le survol d’un élément :hover.

Voici un exemple :

Ceci délimite un code CSS déclenché en cas de survol de n’importe quel élément dans une balise <a>.

 10.2    Effet au clic ou au focus

 10.2.1  :active

Nous disposons du pseudo-format :active qui définira l'effet au moment du clic souris.

Il est en pratique utilisé pour les hyperliens, pour les changer de couleur, le temps que le bouton de souris reste enfoncé, après cela le lien s'enclenche.

 10.2.2  :focus

Il existe aussi le pseudo-format :focus qui lui, rentre en action lorsque l'élément est sélectionné.

 

 10.3    Effet lorsqu'un lien a déjà été consulté.

C'est le pseudo-format :visited qui permet de paramétrer l'apparence des liens pointant sur des sites déjà visités.