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.
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.
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.
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.
Source: Stackoverflow.com