How do you add pseudo classes to elements using jQuery?

In CSS, when you hover your mouse over an element, you can specify views for it using the :hover pseudo class:

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

How can you use jquery to add or "turn on" this pseudo class? Typically in jQuery if you want to add a class you would do:

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

I have tried "hover" but this literally adds a class named "hover" to the element.

If anyone knows what to write, please let me know! Thanks!

You can't force a certain pseudo-class to apply using jQuery. That's not how pseudo-classes (especially dynamic pseudo-classes) work, since they're designed to select based on information that cannot be expressed via the DOM (spec).

You have to specify another class to use, then add that class using jQuery instead. Something like this:

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

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

Alternatively you could hunt for the .element_class_name:hover rule and add that class using jQuery itself, without hardcoding it into your stylesheet. It's the same principle, though.

chanjarster

I think there is no way to do that with jQuery or javascript.

You can find the same answer in these two questions:

Make a div on the page

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

And then programmatically hardcode the style, i.e.,

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

Unfortunately, the element you are calling this will have to have an id.

$("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>

来源：https://stackoverflow.com/questions/12740967/how-do-you-add-pseudo-classes-to-elements-using-jquery

标签

jquery

css

css3

pseudo-class