Chrome and Firefox immediately dispatch the mouseleave event and remove the :hover style, but Edge and Safari dispatch the mouseleave event when the mouse next moves. It's not clear by spec that either behavior is wrong, and arguably firing when the pointer next moves is more correct (since the pointing device moved) however it might be more developer friendly to fire immediately since the pointing device is no longer over the element.
Whatever we do for mouseleave should be matched by mouseenter and probably hover (i.e. currently Edge and Safari do not remove the :hover styling or dispatch mouseenter when the element is moved back under the pointer since as far as pointer movement is concerned the pointer never moved off of the element).
mouseleave must be fired "when a pointing device is moved off of the boundaries of an element and all of its descendent elements". However, if the element is moved, there is currently very inconsistent behavior. I put together a demo showing this.
Chrome and Firefox immediately dispatch the mouseleave event and remove the :hover style, but Edge and Safari dispatch the mouseleave event when the mouse next moves. It's not clear by spec that either behavior is wrong, and arguably firing when the pointer next moves is more correct (since the pointing device moved) however it might be more developer friendly to fire immediately since the pointing device is no longer over the element.
Whatever we do for mouseleave should be matched by mouseenter and probably hover (i.e. currently Edge and Safari do not remove the :hover styling or dispatch mouseenter when the element is moved back under the pointer since as far as pointer movement is concerned the pointer never moved off of the element).