Simulating mouseover event in Safari and Chrome

Question

I am trying to trigger mouseover event which does not seem to work very well in Safari and Chrome in Mac:

$(".footer img#image").trigger('mouseover');

I also tried this javascript code snippet:

var event = document.createEvent("HTMLEvents");
event.initEvent("mouseover", true, true); 
document.getElementById("#image").dispatchEvent(event);

However this also does not seem to work very well. Does anyone know a reliable way to get this to work in Safari and Chrome in Mac?

Are you trying to trigger the mouseover event to simulate a hover (and its styling), or are you trying to merely trigger the event? — Daniel Apt, Oct 27 '14 at 15:26
You can't "simulate" hover, but you can trigger the custom event handlers you have added. — Sergiu Paraschiv, Oct 27 '14 at 15:39
@DanielApt I am trying to trigger `mouseover` event on an image. — user1448031, Oct 27 '14 at 15:48
remove the `#` from the `document.getElementById` call, it's not jquery :), you should use the plain ID attribute value. — Luizgrs, Oct 27 '14 at 16:00
I don't understand why nothing is happening, as I am able to trigger the ```mouseenter``` event and am able to capture it, see http://jsfiddle.net/r0adz34z/ — Daniel Apt, Oct 27 '14 at 17:13
Maybe you are triggering the event before you have added the event listeners? Have you verified that an actual ```mouseenter``` does trigger the handler? — Daniel Apt, Oct 27 '14 at 17:14

score 1 · Answer 1 · edited Sep 12 '17 at 08:29

Try creating a new jQuery event and adding pageX and pageY to it:

var element = $("div.target");
var mouseover = $.Event("mouseover");
mouseover.pageX = 100;
mouseover.pageY = 1000;
element.trigger(mouseover);

Native Javascript:

<h1 onmouseover="style.color='red'" onmouseout="style.color='black'">Mouse over this text</h1>

I've seen similar posts to this with both on will try and find \ post links if possible.

Hope this helps!

1 Answers1