simulate mouse hover using javascript

Question

I try to simulate mouse hover using javascript Here is my code:

<!DOCTYPE html>
<html lang="en">
<head>
      <meta charset="utf-8">
      <style>
             #chart:hover {
                   background-color: yellow;
             }
      </style>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="chart" onmousemove="showCoords(event)">This is a div</div>
<button>Button</button>
<script>
    $("button").click(function(){
       triggerMouseHover();
    });
    var triggerMouseHover = function(){
        //x, y is coordinate of mouse pointer
        function simulateMouseHover(x, y) {
            var el = document.elementFromPoint(x, y);
            var fireMouseEvent = function (type, x, y) {
                var evt = document.createEvent("MouseEvents");
                evt.initMouseEvent(type, true, true, window, 1, 0, 0, x, y, false, false, false, false, 0, null);
                el.dispatchEvent(evt);
            };
            fireMouseEvent('mousemove', x, y);
            fireMouseEvent('mouseleave', x, y);
        };
        simulateMouseHover(Math.floor((Math.random() * 1260) + 1), (Math.floor(Math.random() * 263) + 1));
    }
    function showCoords(event) {
        console.log ("X: " + event.clientX + " Y: " + event.clientY);
    }

</script>
</body>
</html>

My expected output is div element will change background color like really mouse hover event with exactly coordinations (x, y), but output is only mouse move to (x,y), not mouse hover. Please help me to resolve it. Thanks a lot.

are you doing it for experimental purposes? if not javascript already provide you the interfaces to catch such events — Umair Abid, May 11 '18 at 08:55
Yes. I'm doing it for experimental purposes. Do you have any idea to resolve it? — Hoa Nguyen, May 11 '18 at 09:05
you will need to calculate the position of element w.r.t document using https://stackoverflow.com/questions/5598743/finding-elements-position-relative-to-the-document and then you will be listening to mouse move event and see if mouse pointer enters in the region covered by element when it does you trigger the event — Umair Abid, May 11 '18 at 09:10
Possible duplicate of [How do I simulate a mouseover in pure JavaScript that activates the CSS ":hover"?](https://stackoverflow.com/questions/17226676/how-do-i-simulate-a-mouseover-in-pure-javascript-that-activates-the-css-hover) — Oded Ben Dov, Jun 03 '19 at 09:06

Rajan Desai · Answer 1 · 2018-05-11T09:20:13.880

0

<table style="width:300px;height:100px">
  <tr>
    <td onmouseover="bgChange(this.style.backgroundColor)" 
        onmouseout="bgChange('transparent')"
        style="background-color:Khaki">
    </td>
    <td onmouseover="bgChange(this.style.backgroundColor)" 
        onmouseout="bgChange('transparent')"
        style="background-color:PaleGreen">
    </td>
    <td onmouseover="bgChange(this.style.backgroundColor)" 
        onmouseout="bgChange('transparent')"
        style="background-color:Silver">
    </td>
  </tr>
</table>

maybe this work..

edited May 11 '18 at 09:20

answered May 11 '18 at 08:34

Rajan Desai

79
1
11

I want to mouse hover at area around a coordinations (x,y) in div element. Do you have any idea for this problem? – Hoa Nguyen May 11 '18 at 08:57

simulate mouse hover using javascript

1 Answers1