onmouseleave
Event
Example
Execute JavaScript when the mouse pointer moves out of an element:
<img onmouseleave="normalImg(this)" src="smiley.gif" alt="Smiley">
Click "Try it" in the following more examples to see more demonstrations.
Definition and Usage
The onmouseleave
event is triggered when the mouse pointer moves out of an element.
Tip: This event is often used together with the onmouseenter
event, which is triggered when the mouse pointer moves over an element.
Tip: The onmouseleave
event is similar to the onmouseout
event. The only difference is that the onmouseleave
event does not bubble.
Browser Support
The numbers in the table specify the first browser version that fully supports the event.
Event | Chrome | IE | Firefox | Safari | Opera |
---|---|---|---|---|---|
onmouseleave | 30.0 | 5.5 | Yes | 6.1 | 11.5 |
Syntax
In HTML:
In JavaScript:
In JavaScript, using the addEventListener()
method:
Note: Internet Explorer 8 and earlier versions do not support the addEventListener()
method.
Technical Details
Bubbles: | No |
---|---|
Cancelable: | No |
--- | --- |
Event Type: | MouseEvent |
--- | --- |
Supported HTML Tags: | All HTML elements, except: <base> , <bdo> , <br> , <head> , <html> , <iframe> , <meta> , <param> , <script> , <style> , and <title> |
--- | --- |
More Examples
Example
This example demonstrates the difference between the 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>