Changer l’apparence d’un élément au survole en JS

0.00 avg. rating (0% score) - 0 votes
Partager:

En CSS, il y a une pseudo-classe qui s’appelle hover qui permet de modifier l’apparence d’un élément survolé par le curseur(souris) sur un lien ou tout autre élément. On va voir comment le faire en JS avec jquery.

En CSS pour le test avec dives paramètres:


a.lien_test:hover {
background-color: grey;
color: white;
padding: 4px;
border-radius: 5px;
}

En JS:


$(".lien_test").hover(function(){
$(this).css({'background-color': 'grey', 'color': 'white', 'padding': '4px', 'border-radius': '5px'});
	}, function(){
$(this).css({'background-color': '', 'color': 'black'});
});

Explication:
La première fonction change divers paramètres d’affichage des éléments ou est appliqué la class lien_test, la seconde fonction remet tout par défaut quand le curseur(souris) ne survole plus l’élément.


Tous les codes sont testés et sont fonctionnels, si un de ces codes ne marche pas chez vous, merci de me le signaler.
Partager:
0.00 avg. rating (0% score) - 0 votes

Vous aimerez aussi...

Laisser un commentaire