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 | Status |
---|---|
UI Events The definition of 'mouseover' in that specification. |
Working Draft |
Document Object Model (DOM) Level 3 Events Specification The definition of 'mouseover' in that specification. |
Obsolete |
Browser compatibility
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
mouseover event | Chrome Full support 2 | Edge Full support 12 | Firefox Full support 6 | IE Full support 9 | Opera Full support 9.5 | Safari Full support 4 | WebView Android Full support ≤37 | Chrome Android Full support 18 | Firefox Android Full support 6 | Opera Android Full support 10.1 | Safari iOS Full support 3.2 | Samsung Internet Android Full support 1.0 |
Legend
- Full support
- Full support