Non, ce n'est pas un "rollover" mais un effet de FDS !

Un bref rappel de 2 pages de la sous-rubrique "Html et JavaScript" ne sera pas inutile pour vous permettre de comprendre le mécanisme des feuilles de style lors de l'installation de liens hypertextes :


un lien hypertexte

Passez le curseur de la souris sur le lien !

Avec cet exemple très simple, vous aviez personnalisé vos liens par une écriture comme celle-ci :

 a : link { color : blue } a : hover { color : red } 


un lien hypertexte

Mieux :
Passez le curseur de la souris sur le lien !

Ce second lien, non souligné s'il n'est pas activé, s'écrit comme ceci dans la FDS :

 a : link { color : yellow ; text-decoration : none} a : hover { color : white ; text-decoration : underline} 

Les ressources des feuilles de style vont toutefois bien plus loin et permettent une interactivité particulièrement intéressante dans la présentation des liens hypertexte :


 un lien hypertexte 

Encore mieux :
Passez le curseur de la souris sur le lien !

Pour ce troisème lien, la ligne  a : hover  sera complétée de la manière suivante :

  a : hover { color : yellow ; text-decoration : underline ; background-color : red } 


 un lien hypertexte 

De mieux en mieux :
Passez le curseur de la souris sur le lien !

Et le quatrième lien, encore plus frappant, verra la ligne  a : hover  écrite comme ceci :

 a : hover { color : red ; text-decoration : underline ; background-color : yellow ; border : 5 px outset} 

Vous remarquez ainsi que toutes les fantaisies sont permises grâce aux FdS : les couleurs, les tailles de police, leur brillance, les fonds et les bordures peuvent être présentés dans de multiples combinaisons. Gardez toutefois à l'esprit que l'excès nuit au sérieux d'une page ... lorsqu'elle se veut sérieuse, évidemment !

... et si cette fantaise ne vous suffit pas encore, voyez donc l'exposé où JavaScript et CSS se combinent !

retour