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

Dans le CSS, lorsque vous passez votre souris sur un élément, vous pouvez spécifier les points de vue pour qu'il l'aide de l' :hover pseudo classe:

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

Comment pouvez-vous utiliser jquery pour ajouter ou "activer" cette pseudo classe? Généralement en jQuery si vous souhaitez ajouter une classe que vous feriez:

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

J'ai essayé le "hover", mais c'est littéralement ajoute une classe nommée "hover" pour l'élément.

Si quelqu'un sait de quoi écrire, s'il vous plaît laissez-moi savoir! Merci!

InformationsquelleAutor jay | 2012-10-05
  1. 47

    Vous ne pouvez pas forcer une certaine pseudo-classe à appliquer à l'aide de jQuery. Ce n'est pas la façon dont les pseudo-classes (surtout la dynamique des pseudo-classes) de travail, car ils sont conçus pour sélectionner en fonction des informations qui ne peuvent être exprimées par le DOM (spec).

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

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

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

    Sinon, vous pouvez chasser pour les .element_class_name:hover règle et d'ajouter que la classe à l'aide de jQuery lui-même, sans le coder en dur dans votre feuille de style. C'est le même principe, cependant.

    InformationsquelleAutor BoltClock
  2. 8

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

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

    1. mise en css-pseudo-classe-règles-de-javascript
    2. css-les pseudo-classes-avec-jquery
    InformationsquelleAutor chanjarster
  3. 0

    Faire une div sur la page

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

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

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

    Malheureusement, l'élément que vous appelez cela permettra d'avoir un id.

    JS:

    $("body").children().click(function(){
  $("#Style").find("style").prepend("#" + this.id + ":hover, ");
});

    CSS:

    /* demo */
* {
  transition: opacity 1s;
}

    HTML:

    <!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>

    InformationsquelleAutor I.Am.A.Guy