I am translating ( via jQuery / CSS3 ) a #wrapper div, by updating Y axis.

I've attached mouseenter / mouseleave events to child elements of #wrapper.

When #wrapper translates, its child es under mouse one by one ( even if mouse does not move ). And this does not fire the mouseenter , mouseleave events.

However, events are fired when element has scrollbar and scrolled by mousewheel ( instead of translating ).

Is this a default behavior ? If yes, any workaround ?

Demo

Try scrolling with mousewheel, without moving mouse. I expect to change the background of .block to red color, but it's not happening.

I am translating ( via jQuery / CSS3 ) a #wrapper div, by updating Y axis.

I've attached mouseenter / mouseleave events to child elements of #wrapper.

When #wrapper translates, its child es under mouse one by one ( even if mouse does not move ). And this does not fire the mouseenter , mouseleave events.

However, events are fired when element has scrollbar and scrolled by mousewheel ( instead of translating ).

Is this a default behavior ? If yes, any workaround ?

Demo

Try scrolling with mousewheel, without moving mouse. I expect to change the background of .block to red color, but it's not happening.

• javascript
• jquery
• css
• mouseover
• mousewheel

• 2 Most events are triggered only by user actions, not by actions of the browser itself. E.g. change is only triggered when the user modifies an input, not when a script assigns to element.value. So it makes sense that mouseenter events would only be triggered when the user moves the mouse into the element, not when the element moves under the mouse. – Barmar Commented Feb 6, 2014 at 17:36
• You never use scrolltop(), offset() or scroll(), I could not find it in code, but it is cumbersome to search through the code in JSFIDDLE, have to paste into editor. ;) – loveNoHate Commented Feb 6, 2014 at 17:41
• @Barmar, but it does fire in case of default scroll. See this demo – Jashwant Commented Feb 6, 2014 at 18:55
• well, @Jashwant, scrolling is a user action, so Barmar still has a point. – Eliran Malka Commented Feb 15, 2014 at 1:07

1 Answer 1

Example:

document.elementFromPoint(x, y);

Definition from Here:

Returns the element from the document whose elementFromPoint method is being called which is the topmost element which lies under the given point. To get an element, specify the point via coordinates, in CSS pixels, relative to the upper-left-most point in the window or frame containing the document.

Browser support from 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 bugs, but you get the idea}

Solution 2:

Use debounce from lodash or underscore libraries, to reduce load on 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();
});