Element: mouseout event

Sie lesen die englische Version dieses Inhalts, da für dieses Gebietsschema noch keine Übersetzung vorhanden ist. Helfen Sie uns, diesen Artikel zu übersetzen!

The mouseout event is fired  at an 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.

Bubbles Yes
Cancelable Yes
Interface MouseEvent
Event handler property onmouseout


The following examples show the use of the mouseout event.

mouseout and mouseleave

The following example illustrates the difference between mouseout and mouseleave events. The mouseleave event is added to the <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>


let test = document.getElementById("test");

// Briefly make the list purple when the mouse moves off the
// <ul> element
test.addEventListener("mouseleave", function( event ) {   
  // highlight the mouseleave target
  event.target.style.color = "purple";

  // reset the color after a short delay
  setTimeout(function() {
    event.target.style.color = "";
  }, 1000);
}, false);

// Briefly make an <li> orange when the mouse moves off of it
test.addEventListener("mouseout", function( event ) {   
  // highlight the mouseout target
  event.target.style.color = "orange";

  // reset the color after a short delay
  setTimeout(function() {
    event.target.style.color = "";
  }, 500);
}, false);



Specification Status
UI Events
The definition of 'mouseout' in that specification.
Working Draft
Document Object Model (DOM) Level 3 Events Specification
The definition of 'mouseout' in that specification.

Browser compatibility

Update compatibility data on GitHub
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
mouseout eventChrome Full support YesEdge Full support YesFirefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes


Full support  
Full support

See also