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

Examples

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>

 

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

No compatibility data found. Please contribute data for "api.Element.mouseover" (depth: 1) to the MDN compatibility data repository.

See also