onmouseout event
[This documentation is preliminary and is subject to change.]
Fires when the user moves the mouse pointer outside the boundaries of the object.
 |
Syntax
| HTML Attribute | <element onmouseout = "handler(event)"> |
|---|---|
| Event Property | object.onmouseout = handler; |
| attachEvent Method | object.attachEvent("onmouseout", handler) |
| addEventListener Method | object.addEventListener("mouseout", handler, useCapture) |
Standards information
- HTML 4.01 Specification, Section 18.2.3
Event information
| Synchronous | No |
|---|---|
| Bubbles | No |
| Cancelable | No |
Event handler parameters
- pEvtObj [in]
-
Type: IHTMLEventObj
Remarks
When the user moves the mouse over an object, one onmouseover event occurs, followed by one or more onmousemove events as the user moves the mouse pointer within the object. One onmouseout event occurs when the user moves the mouse pointer out of the object.
Initiates any action associated with this event.
To invoke this event, do one of the following:
- Move the mouse pointer out of an object.
The pEvtObj parameter is required for the following interfaces:
- HTMLAnchorEvents2
- HTMLAreaEvents2
- HTMLButtonElementEvents2
- HTMLControlElementEvents2
- HTMLDocumentEvents2
- HTMLElementEvents2
- HTMLFormElementEvents2
- HTMLImgEvents2
- HTMLFrameSiteEvents2
- HTMLInputFileElementEvents2
- HTMLInputImageEvents2
- HTMLInputTextElementEvents2
- HTMLLabelEvents2
- HTMLLinkElementEvents2
- HTMLMapEvents2
- HTMLMarqueeElementEvents2
- HTMLObjectElementEvents2
- HTMLOptionButtonElementEvents2
- HTMLScriptEvents2
- HTMLSelectElementEvents2
- HTMLStyleElementEvents2
- HTMLTableEvents2
- HTMLTextContainerEvents2
- HTMLWindowEvents2
- HTMLWindowEvents4
Examples
This example uses the onmouseout event to apply a new style to an object.
<body>
<p onmouseout="this.style.color='black';"
onmouseover="this.style.color='red';">
Move the mouse pointer over this text to change its color.
Move the pointer off the text to change the color back.
</p>
</body>
This example shows how to swap images on mouse events.
Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/onmouseoutEX.htm
<head>
<script type="text/javascript">
function flipImage(url)
{
if (window.event.srcElement.tagName == "img" )
{
window.event.srcElement.src = url;
}
}
</script>
</head>
<body>
<p>Move the mouse over the image to see it switch.</p>
<p>
<img src="/workshop/graphics/prop_ro.png"
onmouseover="flipImage('/workshop/graphics/prop_rw.png');"
onmouseout="flipImage('/workshop/graphics/prop_ro.png');">
</p>
</body>
See also
- a
- abbr
- acronym
- address
- applet
- area
- audio
- b
- bdo
- big
- blockQuote
- body
- button
- canvas
- caption
- center
- cite
- code
- custom
- dd
- del
- dfn
- dir
- div
- dl
- document
- dt
- em
- embed
- fieldSet
- font
- form
- hn
- hr
- i
- img
- input type=button
- input type=checkbox
- input type=file
- input type=image
- input type=password
- input type=radio
- input type=reset
- input type=submit
- input type=text
- ins
- kbd
- label
- legend
- li
- listing
- map
- marquee
- menu
- noBR
- object
- ol
- p
- plainText
- pre
- q
- rt
- ruby
- s
- samp
- select
- small
- source
- span
- strike
- strong
- sub
- sup
- table
- tBody
- td
- textArea
- tFoot
- th
- tHead
- tr
- tt
- u
- ul
- var
- video
- window
- xmp
- SVGSVGElement
- Reference
- onmousewheel
- onmousedown
- onmousemove
- onmouseover
- onmouseup
Build date: 3/14/2012
Community Content
Kungfuzi
bug with input type=button
Consistent with other comments, there is a bug with the onmouseout event and input buttons.
The onmouseout event fires on moving the mouse within the confines of the button, and the toElement.nodeName reports as "shape" which is very confusing.
Makes the onmouseout event unusable for the input button, which is a great shame, as I need the event bubbling that onmouseleave does not provide.
Edit: The work around solution of course lies in my own comment. If I check for toElement.nodeName = "shape", then I can assume I am still in the button; problem solved.
Wally Fan
Button property is not set.
Contrary to the Event object properties listed as available with the mouseout event, in IE8 the button property does not correctly reflect the state of the mouse buttons at the time of the mouseout. It is always 0.
rednael
Issue with Mouse events and transparent background on Input elements and Textareas
Please consider the following article:
http://blog.rednael.com/2009/09/01/TrappingMouseEventsOnTransparentInputElementsOrTextareasInIE.aspx
It describes an issue when trying to trap mouse events on transparent Input elements (type=text) and Textarea elements.
http://blog.rednael.com/2009/09/01/TrappingMouseEventsOnTransparentInputElementsOrTextareasInIE.aspx
It describes an issue when trying to trap mouse events on transparent Input elements (type=text) and Textarea elements.
Mr. Raymond Kenneth Petry
Remark - boundary - is content - (cf onmouseleave)
(first draft - manual testing)
onmouseout fires on moving the mouse-pointer (also by the roller) outside--
1. content margin
2. non-content, blank, scrollbar (eg. moving from 2. to 1.)
3. window.focus (leaving the webpage)
4. tbd (interactions with onmouseleave, that fire between margins, padding, and wrap-overflow, firsttime and sometimes thereafter)
--and before onmouseleave.
onmouseout fires on moving the mouse-pointer (also by the roller) outside--
1. content margin
2. non-content, blank, scrollbar (eg. moving from 2. to 1.)
3. window.focus (leaving the webpage)
4. tbd (interactions with onmouseleave, that fire between margins, padding, and wrap-overflow, firsttime and sometimes thereafter)
--and before onmouseleave.