Fires when the user moves the mouse pointer over the object.
| Inline |
<element onmouseover = "handler" ... > |
| Script |
object.onmouseover = handler |
| Bubbles |
Yes |
| Cancels |
Yes |
| To invoke |
Move the mouse pointer over an object. |
| Default action |
Initiates any action associated with this event. |
A mouseover event occurs when the pointing device first enters the object and does not repeat unless the user moves the pointer out of the object and then back into it.
This event is valid for most elements.
While event handlers in the Document Object Model do not receive parameters directly, the handler can query the event object for data.
Event Object Properties
| altKey |
Retrieves the current state of the ALT key. |
| button |
Retrieves which mouse button, if any, is pressed. |
| cancelBubble |
Sets or retrieves whether the current event should bubble up the hierarchy of event handlers. |
| clientX |
Retrieves the x-coordinate of the position of the cursor when the mouse is clicked, relative to the size of the client area of the window but excluding window decorations or scroll bars. |
| clientY |
Returns the y-coordinate of the position of the cursor when the mouse is clicked, relative to the size of the client area of the window but excluding window decorations or scroll bars. |
| ctrlKey |
Retrieves the state of the CTRL key. |
| fromElement |
Retrieves the object the cursor is exiting during the onmouseover and onmouseout events. |
| offsetX |
Retrieves the horizontal coordinate of the mouse's position relative to the object firing the event. |
| offsetY |
Retrieves the vertical coordinate of the mouse's position relative to the object firing the event. |
| returnValue |
Sets or retrieves the return value from the event. |
| screenX |
Retrieves the horizontal position of the mouse, in pixels, relative to the user's screen. |
| screenY |
Retrieves the vertical position of the mouse, in pixels, relative to the user's screen. |
| shiftKey |
Retrieves the state of the SHIFT key. |
| srcElement |
Retrieves the object that fired the event. |
| toElement |
Retrieves the object being moved to as a result of an onmouseover or onmouseout event. |
| type |
Retrieves the event name from the event object. |
| x |
Returns the horizontal position of the mouse when the event fires. |
| y |
Returns the vertical position of the mouse when the event fires. |
The first example shows how to change the value of a text area in response to mouse events. The second demonstrates how to use the onmouseover event to apply a new style to an object.
Sample Code
<div align="center">
<textarea cols=25
onmouseover="this.value='onmouseover has fired'"
onmouseout="this.value=''"></textarea>
<h5 id=theTxt onmouseover="this.style.color='lime'"
onmouseout="this.style.color=''">
Move the mouse pointer over this text,
then move it elsewhere in the document.</h5>
</div>
Show me
onmousedown, onmousemove, onmouseout, onmouseup