How to force a hover state with jQuery?

Question

Please, considere this CSS code:

a { color: #ffcc00; } a:hover { color: #ccff00; } 

This HTML code:

<a href="#" id="link">Link</a> <button id="btn">Click here</button> 

And, finally, this JS code:

$("#btn").click(function() {    $("#link").trigger("hover"); }); 

I would like to make my link uses its pseudo-class :hover when the button is clicked. I tried to trigger events like mousemove, mouseenter, hover etc, but anyone works. Notice that I want to force the use of the my CSS pseudo-class :hover specification and not use something like:

$("#link").css("color", "ccff00"); 

Some one know how do I do this? Thank you a lot.

Answer 1

You will have to use a class, but don't worry, it's pretty simple. First we'll assign your :hover rules to not only apply to physically-hovered links, but also to links that have the classname hovered.

a:hover, a.hovered { color: #ccff00; } 

Next, when you click #btn, we'll toggle the .hovered class on the #link.

$("#btn").click(function() {    $("#link").toggleClass("hovered"); }); 

If the link has the class already, it will be removed. If it doesn't have the class, it will be added.