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

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.