How do you add pseudo classes to elements using jQuery?

Question

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!

Answer 1

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.

Answer 2

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