Is it possible to simulate hover using JavaScript Events? I tried injecting mouseover event on the target element but no luck.
For example, if there is a link that has a hover selector, is it possible to "hover" over it using JavaScript Events? Basically, I want to trigger CSS hover. You can assume I can't use jQuery.
The jQuery hover event is just using mouseenter
and mouseleave
events. Here is the source of jQuery's hover:
function (fnOver, fnOut) {
return this.mouseenter(fnOver).mouseleave(fnOut || fnOver);
}
Yes, you would simply add onMouseOver and onMouseOut events to the element in question
Like this:
<div class="something" onmouseover="hover(this);" onmouseout="unhover(this);">
Then make your javascript change the element's class (if you want two different CSS classes) or simply modify the element's style directly. You could do something like this.
<script>
function hover(element) {
element.setAttribute('class', 'something hover');
}
function unhover(element) {
element.setAttribute('class', 'something');
}
</script>
Please note that you can also use a library like jQuery to handle this even more simply.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With