This is a strange one, I'm shocked I've never noticed it before. It works like this, if your mouse is still and a div programmatically moves underneath your mouse, a mouseover event will not be triggered in Chrome/Safari - same goes for mouseout. Of course, if you move your mouse slightly once the div has moved underneath your mouse it will work as expected.

I created a demo on jsFiddle. Just let the div oscillate under your mouse, works fine in Firefox, not in Chrome or Safari - have yet to test in IE.

I'm leaning toward this solution... basically rolling my own mouseenter and mouseleave events using this:

if (mouseX > divLeft && mouseX < divRight &&
    mouseY > divTop && mouseY < divBottom){
    // mouse is inside div
}

I say mouseenter and leave because this method would have no bubbling

I was wondering if anyone else had thoughts about this... I have a feeling there is an easy way around it, but so far google hasn't turned anything up.

This is a strange one, I'm shocked I've never noticed it before. It works like this, if your mouse is still and a div programmatically moves underneath your mouse, a mouseover event will not be triggered in Chrome/Safari - same goes for mouseout. Of course, if you move your mouse slightly once the div has moved underneath your mouse it will work as expected.

I created a demo on jsFiddle. Just let the div oscillate under your mouse, works fine in Firefox, not in Chrome or Safari - have yet to test in IE.

I'm leaning toward this solution... basically rolling my own mouseenter and mouseleave events using this:

if (mouseX > divLeft && mouseX < divRight &&
    mouseY > divTop && mouseY < divBottom){
    // mouse is inside div
}

I say mouseenter and leave because this method would have no bubbling

I was wondering if anyone else had thoughts about this... I have a feeling there is an easy way around it, but so far google hasn't turned anything up.

• javascript
• google-chrome
• safari
• dom-events

• 1 Just checked - IE 7 does not trigger the mouseover or mouseout when the mouse is still. – jball Commented Jan 26, 2011 at 21:07
• +1, pretty interesting. It might be possible to trigger the event with javascript by checking the position of the mouse as the div moves. – JCOC611 Commented Jan 26, 2011 at 21:07
• cool thanks, I was just firing up VirtualBox to test – Zevan Commented Jan 26, 2011 at 21:07
• 1 yes JCOC611 that is definitely possible I put the basic conditional you would need to do so in the post... I may resort to that, just wondering if there is a better way. – Zevan Commented Jan 26, 2011 at 21:08
• 1 +1 That is really interesting. I guess its that Webkit does not see the mouse leaving the object, but the object leaving the mouse. We must be in Soviet Russia. – Colum Commented Jan 26, 2011 at 21:19

2 Answers 2

https://bugs.webkit/show_bug.cgi?id=4117

You might find this bug interesting.

This seems to continue happening on Safari. The workaround I went for is using css . Even if the mouseover won't be triggered, the :hover or :not(:hover) css pseudo elements work. So, in case that what you want to do on hover is aplicable through css, like hiding/showing an element, this is a posible solution.