onmouseleave Event

DOM Events MouseEvent

Definition and Usage

When the mouse pointer leaves the element, the onmouseleave event occurs.

Tip:This event is usually used with onmouseenter Eventused together, this event occurs when the mouse pointer moves over the element.

Tip: The onmouseleave event is similar to onmouseout Event. The only difference is that the onmouseleave event does not bubble (does not propagate to the upper document hierarchy). See more examples at the bottom of the page.

Example

Example 1

Execute JavaScript when the mouse pointer moves out of the image:

<img onmouseleave="normalImg(this)" src="smiley.gif" alt="Smiley">

Try It Yourself

Example 2

This example demonstrates the difference between onmousemove, onmouseleave, and onmouseout events:

<div onmousemove="myMoveFunction()">
  <p id="demo">I will demonstrate onmousemove!</p>
</div>
<div onmouseleave="myLeaveFunction()">
  <p id="demo2">I will demonstrate onmouseleave!</p>
</div>
<div onmouseout="myOutFunction()">
  <p id="demo3">I will demonstrate onmouseout!</p>
</div>

Try It Yourself

Syntax

In HTML:

<element onmouseleave="myScript">

Try It Yourself

In JavaScript:

object.onmouseleave = function(){myScript};

Try It Yourself

In JavaScript, use the addEventListener() method:

object.addEventListener("mouseleave", myScript);

Try It Yourself

Note:Internet Explorer 8 or earlier versions do not support addEventListener() Method.

Technical Details

Bubbling: Not supported
Cancelable: Not supported
Event types: MouseEvent
Supported HTML tags: All HTML elements except: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> and <title>
DOM Version: Level 2 Events

Browser Support

The numbers in the table indicate the first browser version that fully supports the event.

Events Chrome IE Firefox Safari Opera
onmouseleave 30.0 5.5 Support 6.1 11.5
DOM Events MouseEvent