Survolez un élément à l'aide de CSS en ligne

Ce didacticiel présentera quelques méthodes pour survoler un élément à l’aide de CSS en ligne.

Utilisez les événements JavaScript onMouseOver et onMouseOut pour créer un effet de survol à l’aide de CSS en ligne

Il est facile d’appliquer l’effet de survol à un élément tout en utilisant un CSS externe. Par exemple, nous pouvons y parvenir comme indiqué ci-dessous :

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

Lorsque nous déplaçons la souris sur l’élément a, la couleur rouge passe au bleu.

Ici, nous avons utilisé le sélecteur :hover pour sélectionner l’élément de notre choix. Mais, nous ne pouvons pas écrire le sélecteur :hover en CSS inline.

C’est parce que le CSS en ligne ne prend en charge que les styles, il ne nous permet donc pas d’écrire le sélecteur. Mais, nous pouvons toujours simuler l’effet de survol en utilisant le CSS en ligne.

Pour cela, nous devons utiliser les événements JavaScript onMouseOver et onMouseOut. L’événement onMouseOver s’exécutera lorsque nous déplacerons le pointeur de la souris sur un élément.

De même, l’événement onMouseOut s’exécutera lorsque nous déplacerons le pointeur de la souris hors d’un élément. Nous pouvons utiliser ces événements comme attribut de la balise d’ancrage et définir la couleur du texte.

Par exemple, nous pouvons définir une couleur lorsque la souris est déplacée sur le texte à l’aide de l’événement onMouseOver et définir une autre couleur à l’aide de l’événement onMouseOut. Nous pouvons utiliser le mot-clé this pour invoquer les propriétés style et color puis affecter une couleur.

Par exemple, créez une balise d’ancrage avec le texte Click Here et utilisez l’événement onMouseOver comme attribut de la balise d’ancrage. Définissez sa valeur sur this.style.color et donnez le code de couleur #f00 et donnez le code de couleur #000 à l’événement onMouseOut.

Lorsque nous déplaçons la souris sur le texte Click Here, la couleur passe au rouge. Et, lorsque nous retirons la souris du texte, la couleur devient noire.

De cette façon, nous pouvons utiliser les événements JavaScript pour simuler l’effet de survol à l’aide du CSS en ligne.

Exemple de code :

<a href="#"
 onMouseOver="this.style.color='#f00'"
 onMouseOut="this.style.color='#000'" >
 Click Here
</a>