48

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!

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
jay
  • 12,066
  • 16
  • 64
  • 103
  • You want to use jQuery to add a class to an element when the mouse hovers it? – Kyle Oct 05 '12 at 06:48
  • 1
    This may help: http://forum.jquery.com/topic/jquery-triggering-css-pseudo-selectors-like-hover – Kalpesh Patel Oct 05 '12 at 06:51
  • Related question: [Manipulating CSS pseudo-elements using jQuery (e.g. :before and :after)](http://stackoverflow.com/questions/5041494/manipulating-css-pseudo-elements-using-jquery-e-g-before-and-after/21709814#21709814) – Blazemonger Sep 19 '14 at 13:42

4 Answers4

54

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.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
8

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

You can find the same answer in these two questions:

  1. setting-css-pseudo-class-rules-from-javascript
  2. css-pseudo-classes-with-jquery
Community
  • 1
  • 1
chanjarster
  • 506
  • 3
  • 17
0

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>
see
  • 388
  • 4
  • 13
0

jQuery has a hover() function as seen here: https://www.w3schools.com/jquery/event_hover.asp

It's a pretty nice function for :hover pollyfill.

$(selector).hover(inFunction,outFunction)

Michael Artman
  • 319
  • 1
  • 14