Adding mouseenter event listeners
Note that the example won’t work on Chrome and Safari, simply because they do not support the mouseenter event.
Delegating the mouseenter event
Another downside of mouseenter event, at least for our project, is that it does not bubble and it isn’t sent when the pointer is moved from one of its descendants’ physical space to its own physical space. In other words it’s impossible to delegate this event, or we can’t detect this event on child elements while attaching a single handler for it on a parent element. The example below listens the parent element for mouseenter event, and it won’t get detected when hovering the child elements. Again, this demonstration won’t work on Chrome and Safari.
CSS animations events in help
Recently (well, almost a year ago now), David Walsh wrote about Detecting DOM Node Insertions with CSS Animations, quite astonishing and yet simple technique which uses the CSS Animations event types (
animationstart in particular) to identify when a node is inserted. Using this technique can be used to detect
mouseenter as well. Mouseenter acts in the same way as the CSS
:hover pseudo-class, so by applying a CSS Animation on the
:hover state of an element and listening to the appropriate animation event we are able to successfully detect mouseenter. The CSS animation has no visual, but strictly functional purpose.
The example below demonstrates this, and contrary to the previous examples it also works on Chrome and Safari. The
mouseentered animation is applied to the
.mouseenter:hover CSS class, and with
delegator.addEventListener('animationstart', onMouseEnterAnim, false); we are able to detect when an element has been hovered.
And finally, this very same technique can be applied to
mouseleave – the
mouseenter‘s counterpart – by adding CSS animation to an element in its normal state instead of its
:hover state. And of course, applying two CSS animations on both state at the same time can detect both of them as in the example below. With
e.animationName we can determine the exact event.