mouseover

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.

General infoEdit

Specification

DOM L3

Interface

MouseEvent

Bubbles

Yes

Cancelable

Yes

Target

Element

Default Action

None

PropertiesEdit

ExampleEdit

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 compatibilityEdit

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

[2] Implemented in bug 218093.

See alsoEdit

• mousedown
• mouseup
• mousemove
• click
• dblclick
• mouseover
• mouseout
• mouseenter
• mouseleave
• contextmenu