Simulate hover using JavaScript events

Question

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.

Answer 1

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);
}

Answer 2

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.