web-dev-qa-db-fra.com

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

Je dois définir la couleur d'arrière-plan d'une div sur: survolez avec jQuery, mais ce qui suit ne semble pas fonctionner:

$(".myclass:hover div").css("background-color","red");

Comment puis-je obtenir le même résultat? Il est important que cela soit fait avec jQuery, mais pour une raison quelconque, cela ne fonctionne pas. Aucune suggestion? Merci!

javascriptjqueryhtmlcss
60
George

Je suggérerais 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 changer votre sélecteur selon vos besoins.

Comme l'a commenté @ A.Wolff, si vous voulez utiliser cet effet de survol pour 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

76
Sachin

Vous pouvez essayer ceci:

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

DEMO

22
Rahil Wazir

Eh bien, vous ne pouvez pas ajouter de style à l'aide de pseudo-sélecteurs tels que :hover, :after, :nth-child Ou quelque chose de ce genre à l'aide de jQuery.

Si vous souhaitez ajouter une règle CSS comme celle-ci, vous devez créer un élément <style> Et y ajouter cette règle :hover, Exactement comme vous le feriez en CSS. Ensuite, vous devrez ajouter cet élément <style> À la page.

Utiliser la fonction .hover Semble plus approprié si vous ne pouvez pas simplement ajouter le css à une feuille de style, mais si vous insistez, vous pouvez le faire:

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

Si vous voulez en savoir plus sur l'ajout de CSS avec javascript, vous pouvez consulter l'un des messages du blog de David Walsh .

13
arjabbar

Je sais que cela a une réponse acceptée, mais si quelqu'un y parvient, ma solution peut aider.

J'ai trouvé cette question parce que j'ai un cas d'utilisation dans lequel je voulais désactiver l'état: survol pour les éléments individuellement. Puisqu'il n'y a aucun moyen de faire cela dans le DOM, un autre bon moyen de le faire est de définir une classe dans CSS qui remplace l'état de survol.

Par exemple, le css:

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

Puis avec jQuery:

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

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

11
funkju

Utilisez JQuery Hover pour ajouter/supprimer une classe ou un style au survol:

$( "mah div" ).hover(
  function() {
    $( this ).css("background-color","red");
  }, function() {
    $( this ).css("background-color",""); //to remove property set it to ''
  }
);
2
JerryGoyal

Il est trop tard, cependant, le meilleur exemple, comment ajouter un pseudo élément dans le style jQuery

 $(document).ready(function(){
 $("a.dummy").css({"background":"#003d79","color":"#fff","padding": "5px 10px","border-radius": "3px","text-decoration":"none"});
 $("a.dummy").hover(function() {
            $(this).css("background-color","#0670c9")
          }).mouseout(function(){
              $(this).css({"background-color":"#003d79",});
          });
 
 });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<a class="dummy" href="javascript:void()">Just Link</a>
1
veera