Changer de classe à la volée

© Paladin. Document créé le 21 mai 2007 , mis à jour le 21 mai 2007.

L'idéal quand on veut être admiré, c'est d'être mort. Michel Audiard

Accueil du site > Astuces > CSS > Changer de classe à la volée

CSS / FireFox 2, IE6, IE7, Opera 9, Safari

Lorsque vous survolez un objet avec la souris, celui-ci semble parfois réagir à cette approche du curseur, en changeant de couleur, de bordure, etc. En général, ce comportement n’apparaît que pour les liens (les objets ‘a’).

Voici par exemple un lien qui renvoie sur cette page :

Survolez-moi !

Le code CSS nécessaire à cette interprétation/comportement est :

<style type="text/css">
<!--
a:hover {
        background-color:orange;
}
-->
</style>

Ce comportement peut être ajouté à la plupart des objets HTML. Prenons l’exemple d’un titre de niveau 4 :

<h4 title="Ceci est un titre de niveau 4">Survolez-moi !</h4>

La feuille de style CSS suffit à ajouter ce comportement à tous les titres de niveau 4 de la page.

<style type="text/css">
<!--
h4:hover {
        background-color:orange;
}
-->
</style>

Des navigateurs testés ici (la liste est en tête de cette page), seul IE6 ne prend pas en compte un comportement ‘hover’ sauf bien sûr sur un lien (objet ‘a’).

Comportements en DHTML

Autre solution, utiliser les comportements « onmouseover » et « onmouseout ». Voici notre titre de force 4 utilisant ce type de comportements :

Survolez-moi !

Et son code CSS :

<style type="text/css">
<!--
.orange-me {
        background-color:orange;
}
-->
</style>

Il suffit ici de créer une feuille de style, une classe « orange-me », et de l’appliquer pour l’évènement « onmouseover » :

<h4 title="Ceci est un titre de niveau 4"
        onmouseover="this.className='orange-me'"
        onmouseout="this.className=''"
        >Survolez-moi !</h4>

Autre solution, tout en restant dans le domaine des évènements, appliquer le style directement au lieu d’utiliser une feuille CSS :

<h4 title="Ceci est un titre de niveau 4"
        onmouseover="this.style.backgroundColor='orange'"
        onmouseout="this.style.backgroundColor=''"
        >Survolez-moi !</h4>

Pour la bonne gestion des évènements, une seule contrainte : javascript doit être activé sur le navigateur.

Plussoyez !

Les forums sont fermés.