mouseout

mouseout is an event in the Document Object Model (DOM) that is fired when the mouse pointer moves out of an element’s area. The event is triggered whether the pointer leaves the element itself or leaves one of its descendant elements, because mouseout propagates up through the DOM (it bubbles).

The event object is a MouseEvent and includes properties such as relatedTarget, which refers to the element that the pointer entered after leaving the current element. If the pointer leaves the document entirely, relatedTarget is null. The target of the event is the element from which the pointer left.

Mouseout is commonly used in interactions that respond when a user stops hovering over an element, such as hiding a tooltip, collapsing a menu, or resetting a hover state. It is often paired with mouseover; moving the pointer between elements within the same region can trigger a mouseout on the previous element and a mouseover on the new one.

A related distinction exists between mouseout and mouseleave. Mouseout bubbles up the DOM, so parent elements may also receive the event when the pointer leaves a child. Mouseleave does not bubble and fires only when the pointer leaves the element itself, not its descendants.

Implementation typically involves adding an event listener, for example: element.addEventListener('mouseout', function(e) { /* handle leaving the element */ }); This event is supported in all major browsers; in older environments, onmouseout attributes may be used. See also mouseover, mouseenter, and mouseleave.