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.
Bubbles | Yes |
---|---|
Cancelable | Yes |
Interface | MouseEvent |
Event handler property | onmouseover |
Examples
The following example illustrates the difference between mouseover
and mouseenter
events.
HTML
<ul id="test">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
JavaScript
let test = document.getElementById("test");
// This handler will be executed only once when the cursor
// moves over the unordered list
test.addEventListener("mouseenter", function( event ) {
// highlight the mouseenter target
event.target.style.color = "purple";
// reset the color after a short delay
setTimeout(function() {
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", function( event ) {
// highlight the mouseover target
event.target.style.color = "orange";
// reset the color after a short delay
setTimeout(function() {
event.target.style.color = "";
}, 500);
}, false);
Result
Specifications
Specification |
---|
UI Events # event-type-mouseover |
Browser compatibility
BCD tables only load in the browser