The mouseover event is fired when a pointing device is moved onto the element that has the listener attached or onto one of its children.

Bubbles Yes
Cancelable Yes
Interface MouseEvent
Event handler property onmouseover

Example

The following example illustrates the difference between mouseover and mouseenter events.

<ul id="test">
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ul>

<script>
  var 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);
</script>

Browser compatibility

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Chrome Firefox (Gecko) Internet Explorer Edge Opera Safari
Basic support (Yes) (Yes) (Yes) (Yes) (Yes) (Yes)
On disabled form elements (Yes)[1] 44.0 (44.0)[2] (Yes) No support (Yes)[1] ?
Feature Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support ? (Yes) ? ? ? ?
On disabled form elements ? No support ? ? ? ?

[1] Only works for <textarea> elements and some <input> element types.

[2] Implemented in bug 218093.

See also