How to force a hover state with jQuery

Question

Please  considere this CSS code   a   color   ffcc00    a hover   color   ccff00      This HTML code    lt a href     id  link  gt Link lt  a gt   lt button id  btn  gt Click here lt  button gt    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

User · Accepted Answer

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

User · Answer

I think the best solution I have come across is on this stackoverflow  This short jQuery code allows all your hover effects to show on click or touch   No need to add anything within the function      body   on  touchstart   function          Hope this helps

User · Answer

Also  you could try triggering a mouseover       btn   click function            link   trigger  mouseover          Not sure if this will work for your specific scenario  but I ve had success triggering mouseover instead of hover for various cases

[jquery] How to force a hover state with jQuery?

Examples related to jquery

Examples related to css