Comment définir l'état css: hover dans un sélecteur jQuery?

Je suggère d'utiliser CSS sur jquery (si possible) sinon vous pouvez utiliser quelque chose comme ça

 $("div.myclass").hover(function() { $(this).css("background-color","red") }); 

Vous pouvez modifier votre sélecteur selon vos besoins.

Comme l'a expliqué @ A.Wolff, si vous souhaitez utiliser cet effet de survoltement sur plusieurs classes, vous pouvez l'utiliser comme ceci

 $(".myclass, .myclass2").hover(function(e) { $(this).css("background-color",e.type === "mouseenter"?"red":"transparent") }) 

Js Fiddle Demo

Vous pouvez essayer ceci:

 $(".myclass").mouseover(function() { $(this).find(" > div").css("background-color","red"); }).mouseout(function() { $(this).find(" > div").css("background-color","transparent"); }); 

DEMO

Eh bien, vous ne pouvez pas ajouter de style à l'aide de pseudo-sélecteurs comme :hover :after :nth-child , ou quelque chose comme ça en utilisant jQuery.

Si vous souhaitez ajouter une règle CSS comme celle-ci, vous devez créer un élément <style> et l'ajouter :hover règle à celle-ci comme vous le feriez dans CSS. Ensuite, vous devriez ajouter cet élément <style> à la page.

L'utilisation de la fonction .hover semble plus appropriée si vous ne pouvez pas simplement ajouter le css à une feuille de style, mais si vous insistez, vous pouvez:

$('head').append('<style>.myclass:hover div {background-color : red;}</style>')

Si vous souhaitez en savoir plus sur l'ajout de CSS avec javascript, vous pouvez consulter l' une des publications du blog de David Walsh .

Je sais que cela a une réponse acceptée, mais si quelqu'un vient sur cela, ma solution pourrait vous aider.

J'ai trouvé cette question parce que j'ai un cas d'utilisation où je voulais désactiver: l'état du vol stationnaire pour les éléments individuellement. Étant donné qu'il n'y a aucun moyen de le faire dans les DOM, une autre bonne façon de le faire est de définir une classe dans CSS qui remplace l'état du planinisateur.

Par exemple, le css:

 .nohover:hover { color: black !important; } 

Ensuite, avec jQuery:

 $("#elm").addClass("nohover"); 

Avec cette méthode, vous pouvez remplacer autant d'éléments DOM que vous le souhaitez sans contraindre des tonnes d'événements onHover.