Occurs when the user moves the mouse pointer out of the element.
The onmouseleave event is only supported by Internet Explorer, for a cross-browser solution, use the onmouseout event.
The only difference between the onmouseleave and onmouseout events is that the onmouseout event propagates up the document hierarchy, while the onmouseleave does not.
Use the onmouseover event to receive a notification when the user moves the mouse pointer into and the onmousemove event to receive a notification when the user moves the mouse pointer over an element.
Note: the onmouseleave event is not fired during a drag operation. For that case, use the ondragleave event.In HTML:
In JavaScript:
| <ELEMENT > |
In JavaScript:
| object.> | |||||||||||
| object.addEventListener ("mouseleave", handler, useCapture); |
| ||||||||||
| object.attachEvent ("onmouseleave", handler); |
You can find the related objects in the Supported by objects section below.
The event object is accessible to all event handlers in all browsers.
The properties of the event object contain additional information about the current event.
To get further details about these properties and the possible event handler registration methods, please see the page for the event object.
| For a complete list of events, see the page for Events in JavaScript. |
| Bubbles | No |
| Cancelable | No |
| Event object | MouseEvent |
- Moving the mouse pointer out of an element.
| Internet Explorer | Firefox, Opera, Google Chrome, Safari |
|---|---|
|
This example illustrates the use of the Internet Explorer specific onmouseenter and onmouseleave events:
|
|
||||
<head> <script type="text/javascript"> function OnMouseIn (elem) { elem.style.border = "2px solid blue"; } function OnMouseOut (elem) { elem.style.border = ""; } </script> </head> <body> <div style="background-color:#d0f0a0; width:200px" onmouseenter="OnMouseIn (this)" onmouseleave="OnMouseOut (this)"> Move your mouse pointer into and out of this element! </div> </body> |
||||
|
||||
|
Did you find this example helpful?
|
A cross-browser solution for the previous example:
|
|
||||
<head> <script type="text/javascript"> function OnMouseIn (elem) { elem.style.border = "2px solid blue"; } function OnMouseOut (elem) { elem.style.border = ""; } </script> </head> <body> <div style="background-color:#d0f0a0; width:200px" onmouseover="OnMouseIn (this)" onmouseout="OnMouseOut (this)"> Move your mouse pointer into and out of this element! </div> </body> |
||||
|
||||
|
Did you find this example helpful?
|
This example dumps the order of events while the mouse moves into, over and out of an element:
|
|
||||
<head> <script type="text/javascript"> function DumpInfo (event) { var info = document.getElementById ("info"); info.innerHTML += event.type + ", "; } </script> </head> <body> <div style="background-color:#d0f0a0; width:200px" onmouseover="DumpInfo (event)" onmouseenter="DumpInfo (event)" onmousemove="DumpInfo (event)" onmouseout="DumpInfo (event)" onmouseleave="DumpInfo (event)"> Move your mouse pointer into and out of this element! </div> <br /><br /> <div id="info" style="background-color:#f0f0ff; font-weight:bold;"></div> </body> |
||||
|
||||
|
Did you find this example helpful?
|
HTML elements:
a, abbr, acronym, address, applet, area, b, bdo, big, blockquote, body, button, caption, center, cite, code, dd, del, dfn, dir, div, dl, dt, em, embed, fieldset, font, form, frame, frameset, h1, h2, h3, h4, h5, h6, hr, html, i, iframe, img, input:button, input:checkbox, input:file, input:image, input:password, input:radio, input:reset, input:submit, input:text, ins, isindex, kbd, label, legend, li, listing, map, marquee, menu, nobr, noframes, object, ol, p, plaintext, pre, q, rt, ruby, s, samp, select, small, span, strike, strong, sub, sup, table, tbody, td, textarea, tfoot, th, thead, tr, tt, u, ul, var, xmp
User Contributed Comments