Element: mouseover event
The mouseover
event is fired at an Element
when a pointing device (such as a mouse or trackpad) is used to move the cursor onto the element or one of its child elements.
Syntax
Use the event name in methods like addEventListener()
, or set an event handler property.
js
addEventListener("mouseover", (event) => {});
onmouseover = (event) => {};
Event type
A MouseEvent
. Inherits from Event
.
Event properties
This interface also inherits properties of its parents, UIEvent
and Event
.
MouseEvent.altKey
Read only-
Returns
true
if the alt key was down when the mouse event was fired. -
The button number that was pressed (if applicable) when the mouse event was fired.
-
The buttons being pressed (if any) when the mouse event was fired.
MouseEvent.clientX
Read only-
The X coordinate of the mouse pointer in local (DOM content) coordinates.
MouseEvent.clientY
Read only-
The Y coordinate of the mouse pointer in local (DOM content) coordinates.
MouseEvent.ctrlKey
Read only-
Returns
true
if the control key was down when the mouse event was fired. MouseEvent.layerX
Non-standard Read only-
Returns the horizontal coordinate of the event relative to the current layer.
MouseEvent.layerY
Non-standard Read only-
Returns the vertical coordinate of the event relative to the current layer.
MouseEvent.metaKey
Read only-
Returns
true
if the meta key was down when the mouse event was fired. MouseEvent.movementX
Read only-
The X coordinate of the mouse pointer relative to the position of the last
mousemove
event. MouseEvent.movementY
Read only-
The Y coordinate of the mouse pointer relative to the position of the last
mousemove
event. MouseEvent.offsetX
Read only-
The X coordinate of the mouse pointer relative to the position of the padding edge of the target node.
MouseEvent.offsetY
Read only-
The Y coordinate of the mouse pointer relative to the position of the padding edge of the target node.
MouseEvent.pageX
Read only-
The X coordinate of the mouse pointer relative to the whole document.
MouseEvent.pageY
Read only-
The Y coordinate of the mouse pointer relative to the whole document.
-
The secondary target for the event, if there is one.
MouseEvent.screenX
Read only-
The X coordinate of the mouse pointer in global (screen) coordinates.
MouseEvent.screenY
Read only-
The Y coordinate of the mouse pointer in global (screen) coordinates.
MouseEvent.shiftKey
Read only-
Returns
true
if the shift key was down when the mouse event was fired. MouseEvent.mozInputSource
Non-standard Read only-
The type of device that generated the event (one of the
MOZ_SOURCE_*
constants). This lets you, for example, determine whether a mouse event was generated by an actual mouse or by a touch event (which might affect the degree of accuracy with which you interpret the coordinates associated with the event). MouseEvent.webkitForce
Non-standard Read only-
The amount of pressure applied when clicking.
MouseEvent.x
Read only-
Alias for
MouseEvent.clientX
. MouseEvent.y
Read only-
Alias for
MouseEvent.clientY
.
Examples
The following example illustrates the difference between mouseover
and mouseenter
events.
HTML
html
<ul id="test">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
JavaScript
js
const test = document.getElementById("test");
// This handler will be executed only once when the cursor
// moves over the unordered list
test.addEventListener(
"mouseenter",
(event) => {
// highlight the mouseenter target
event.target.style.color = "purple";
// reset the color after a short delay
setTimeout(() => {
event.target.style.color = "";
}, 500);
},
false
);
// This handler will be executed every time the cursor
// is moved over a different list item
test.addEventListener(
"mouseover",
(event) => {
// highlight the mouseover target
event.target.style.color = "orange";
// reset the color after a short delay
setTimeout(() => {
event.target.style.color = "";
}, 500);
},
false
);
Result
Specifications
Specification |
---|
UI Events # event-type-mouseover |
HTML Standard # handler-onmouseover |
Browser compatibility
BCD tables only load in the browser