Mouseenter / Mouseover events do not fire if CSS3 translate / transform is used to reposition an element

Question

I translated (via jQuery / CSS3) a #wrapper div, updating the Y axis.

I attached mouseenter / mouseleave events to mouseenter child elements.

When #wrapper translates, his child falls under the mouse one by one (even if the mouse does not move). And this does not trigger mouseenter , mouseleave .

However, events are fired when an item has a scroll bar and scrolls with the mouse (instead of translating).

Is this the default behavior? If so, any workaround?

Demo

Try to scroll the mouse wheel without moving the mouse. I expect to change the .block background to red , but this does not happen.

Answer 1

An example :

document.elementFromPoint(x, y);

Definition Here :

Returns an element from a document whose elementFromPoint method is the topmost element that lies beneath the given point. To get an element, specify a point through the coordinates in CSS pixels relative to the point of the upper left corner in the window or frame containing the document.

Browser Support Here :

• Internet Explorer 5.5+
• Mozilla Firefox 3+
• Safari Win 5+
• Google Chrome 4+
• Opera 10.53 +

Solution 1 Working example *:

 var currentMousePos = { x: -1, y: -1 }; $(document).mousemove(function(event) { currentMousePos.x = event.pageX; currentMousePos.y = event.pageY; }); $(containerElement).mousewheel(function(event) { $(elementClass).trigger('mouseleave'); var element = document.elementFromPoint(currentMousePos.x, currentMousePos.y); $(element).trigger('mouseenter'); }); 

^{* there are some errors, but you get the idea}

Solution 2 :

Use debounce from lodash or underscore to reduce the load on the client.

 var currentMousePos = { x: -1, y: -1 }; $(document).mousemove(function (event) { currentMousePos.x = event.pageX; currentMousePos.y = event.pageY; }); var debounced = _.debounce(function () { $(elementClass).trigger('mouseleave'); var element = document.elementFromPoint(currentMousePos.x, currentMousePos.y); $(element).trigger('mouseenter'); }, 150); $(containerElement).mousewheel(function (event) { debounced(); });