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.

You could add a css class called "hover" and add it or remove it as needed, just style it exactly like the hover. http://stackoverflow.com/a/1283072/1217408 — TheZ, Jul 30 '12 at 19:40
Do you mean triggering the css-hover styling via javascript? — Esailija, Jul 30 '12 at 19:41
You can take a look at this here on SO: http://stackoverflow.com/questions/608788/css-hover-vs-javascript-mouseover — Nikola, Jul 30 '12 at 19:41
Yes, I want to trigger CSS hover using JavaScript Events only. You can assume I can't use jQuery. — zpavlinovic, Jul 30 '12 at 19:43
@bellpeace Do you mean you want to trigger the native hover action or do you want to trigger handlers attached to it? — ryanve, Jul 30 '12 at 19:50
It would help to know **why** you want to do this, as the "best" answer could be different. e.g. if all you want is to get the style applied dynamically w/o actually mousing, then simply toggling a *hover* class as @TheZ suggests is the most straightforward. — Stephen P, Jul 30 '12 at 21:18

score 4 · Accepted Answer · answered Jul 30 '12 at 19:52

4

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

answered Jul 30 '12 at 19:52

Tim Banks

7,099
5
31
28

How cross browser these events are? It seems that is supported by FF from version 10. – zpavlinovic Jul 30 '12 at 20:28

Mike Brant · Answer 2 · 2012-07-30T20:55:09.947

1

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.

edited Jul 30 '12 at 20:55

answered Jul 30 '12 at 19:51

Mike Brant

70,514
10
99
103

1

I already have an element with hover CSS applied. I want to trigger that hover event by using JavaScript. – zpavlinovic Jul 30 '12 at 20:51
@bellpeace I have added some javascript to the example. – Mike Brant Jul 30 '12 at 20:55
I think you missed my point. I am not crafting the page (i.e., the page can be random), I just want to simulate hover using JavaScript events. – zpavlinovic Jul 31 '12 at 11:54

score 1 · Answer 3 · edited Jun 20 '20 at 09:12

Actually, CSS hover event is more convenient than just binding these two events mouseenter and mouseleave. So it'll need a little more efforts, which are:

1.Clone the element

2.Add a listener to mouseenter event

3.Recursively redo step 1,2 and restore the cloned element on mouseleave

Here is my working draft.

function bindHoverEvent(element,listener){
    var originalElement = element.cloneNode(true);
    element.addEventListener('mouseenter',listener);
    element.addEventListener('mouseleave',function(){
        bindHoverEvent(originalElement,listener);
        this.parentNode.replaceChild(originalElement,this);
    });
}

Please note that, cloneNode does not copy event listeners, so you need to manually rebind events to the cloned element and all its children yourself.

Joe Swislocki · Answer 4 · 2015-03-16T22:24:18.030

It is possible to simulate hover using JavaScript events. I created a module for swapping out images on hover. You can experiment and adapt the module to fit your needs. For the example, I made the image paths and DOM selection elements generic.

// module for swapping out images on hover 
var imageSwap = (function ModuleFactory() {

    "use strict";

    var imageContainer = document.getElementById("image-container"),
        image = document.getElementsByClassName("image")[0],
        imageSource1 = 'path/to/your/image1',
        imageSource2 = 'path/to/your/image2';

    function handleImageSwap(e) {
        if (e.target.id === "image-container") {
            image.setAttribute("src", imageSource2);

            e.target.addEventListener("mouseleave", function _handler_() {
                image.setAttribute("src", imageSource1);
                e.target.removeEventListener("mouseleave", _handler_, false);
            }, false);
        }
    }

    function init() {
        imageContainer.addEventListener("mouseenter", handleImageSwap, false);
    }

    var publicAPI = {
        init: init
    };

    return publicAPI;

})();

document.addEventListener("DOMContentLoaded", imageSwap.init(), false);

Simulate hover using JavaScript events

4 Answers4

Linked