web-dev-qa-db-fra.com

Comment ajouter des pseudo-classes aux éléments à l'aide de jQuery?

En CSS, lorsque vous passez la souris sur un élément, vous pouvez spécifier des vues pour celui-ci à l'aide de la pseudo-classe: hover:

.element_class_name:hover {
    /* stuff here */
}

Comment pouvez-vous utiliser jquery pour ajouter ou "activer" cette pseudo-classe? Typiquement dans jQuery si vous voulez ajouter une classe, vous feriez:

$(this).addClass("class_name");

J'ai essayé "hover" mais cela ajoute littéralement une classe nommée "hover" à l'élément.

Si quelqu'un sait quoi écrire, faites-le moi savoir! Merci!

jquerycsscss3pseudo-class
41
jay

Vous ne pouvez pas forcer une certaine pseudo-classe à appliquer à l'aide de jQuery. Ce n'est pas ainsi que fonctionnent les pseudo-classes (en particulier les pseudo-classes dynamiques), car elles sont conçues pour sélectionner en fonction d'informations qui ne peuvent pas être exprimées via le DOM ( spec ).

Vous devez spécifier une autre classe à utiliser, puis ajouter cette classe à l'aide de jQuery à la place. Quelque chose comme ça:

.element_class_name:hover, .element_class_name.jqhover {
    /* stuff here */
}

$(this).addClass("jqhover");

Vous pouvez également chasser le .element_class_name:hover règle et ajoutez cette classe en utilisant jQuery lui-même, sans le coder en dur dans votre feuille de style. C'est le même principe, cependant.

48
BoltClock

Je pense qu'il n'y a aucun moyen de le faire avec jQuery ou javascript.

Vous pouvez trouver la même réponse dans ces deux questions:

  1. setting-css-pseudo-class-rules-from-javascript
  2. css-pseudo-classes-avec-jquery
8
chanjarster

Faire un div sur la page

<div id="Style">
  <style>
    .element_class_name:hover {
      /* stuff here */
    }
  </style>
</div>

Et puis coder en dur le style, c'est-à-dire

$("#Style").find("style").prepend("#" + this.id + ":hover, ");

Malheureusement, l'élément que vous appelez devra avoir un identifiant.

$("body").children().click(function(){
  $("#Style").find("style").prepend("#" + this.id + ":hover, ");
});
/* demo */
* {
  transition: opacity 1s;
}
<!DOCTYPE html>
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  </head>
  <body>
    <div id="Style">
      <style>
        .element_class_name:hover {
          opacity: 0 !important;
        }
      </style>
    </div>

    <button id="btn1">Add hover class here</button>
    <button id="btn2">Add hover class here too</button>
    <p id="Note">
      To use this though, you'll have to assign an id to that particular element though.
    </p>
  </body>
</html>
0
I.Am.A.Guy