files/en-us/web/api/element/mouseout_event/index.md
{{APIRef("UI Events")}}
The mouseout event is fired at an {{domxref("Element")}} when a pointing device (usually a mouse) is used to move the cursor so that it is no longer contained within the element or one of its children.
mouseout is also delivered to an element if the cursor enters a child element, because the child element obscures the visible area of the element.
If the target element has child elements, mouseout and mouseover events fire as the mouse moves over the boundaries of these elements too, not just the target element itself. Usually, {{domxref("Element/mouseenter_event", "mouseenter")}} and {{domxref("Element/mouseleave_event", "mouseleave")}} events' behavior is more sensible, because they are not affected by moving into child elements.
Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}}, or set an event handler property.
addEventListener("mouseout", (event) => { })
onmouseout = (event) => { }
A {{domxref("MouseEvent")}}. Inherits from {{domxref("UIEvent")}} and {{domxref("Event")}}.
{{InheritanceDiagram("MouseEvent")}}
This interface also inherits properties of its parents, {{domxref("UIEvent")}} and {{domxref("Event")}}.
true if the <kbd>alt</kbd> key was down when the mouse event was fired.true if the <kbd>control</kbd> key was down when the mouse event was fired.true if the <kbd>meta</kbd> key was down when the mouse event was fired.true if the <kbd>shift</kbd> key was down when the mouse event was fired.MOZ_SOURCE_* constants).
This lets you, for example, determine whether a mouse event was generated by an actual mouse or by a touch event (which might affect the degree of accuracy with which you interpret the coordinates associated with the event).The following examples show the use of the mouseout event.
The following example illustrates the difference between mouseout and {{domxref("Element/mouseleave_event", "mouseleave")}} events. The mouseleave event is added to the {{HTMLElement("ul")}} to color the list purple whenever the mouse exits the <ul>. mouseout is added to the list to color the targeted element orange when the mouse exits it.
When you try this out, you'll find that mouseout is delivered to the individual list items, while mouseleave goes to the overall list, courtesy of the hierarchy of the items and the fact that list items obscure the underlying <ul>.
<ul id="test">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
const test = document.getElementById("test");
// Briefly make the list purple when the mouse moves off the
// <ul> element
test.addEventListener("mouseleave", (event) => {
// highlight the mouseleave target
event.target.style.color = "purple";
// reset the color after a short delay
setTimeout(() => {
event.target.style.color = "";
}, 1000);
});
// Briefly make an <li> orange when the mouse moves off of it
test.addEventListener("mouseout", (event) => {
// highlight the mouseout target
event.target.style.color = "orange";
// reset the color after a short delay
setTimeout(() => {
event.target.style.color = "";
}, 500);
});
{{EmbedLiveSample("mouseout_and_mouseleave", 640, 200)}}
{{Specifications}}
{{Compat}}