Element: evento mouseover

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

O evento mouseover é acionado quando um dispositivo ponteiro é movido para o elemento que esteja escutando ou para um de seus filhos.

Sintaxe

Use the event name in methods like addEventListener(), or set an event handler property.

addEventListener("mouseover", (event) => {});

onmouseover = (event) => {};

Tipo de evento

A MouseEvent. Inherits from UIEvent and Event.

Propriedades de evento

This interface also inherits properties of its parents, UIEvent and Event.

MouseEvent.altKey Somente leitura: Returns true if the alt key was down when the mouse event was fired.
MouseEvent.button Somente leitura: The button number that was pressed (if applicable) when the mouse event was fired.
MouseEvent.buttons Somente leitura: The buttons being pressed (if any) when the mouse event was fired.
MouseEvent.clientX Somente leitura: The X coordinate of the mouse pointer in viewport coordinates.
MouseEvent.clientY Somente leitura: The Y coordinate of the mouse pointer in viewport coordinates.
MouseEvent.ctrlKey Somente leitura: Returns true if the control key was down when the mouse event was fired.
MouseEvent.layerX Non-standard Somente leitura: Returns the horizontal coordinate of the event relative to the current layer.
MouseEvent.layerY Non-standard Somente leitura: Returns the vertical coordinate of the event relative to the current layer.
MouseEvent.metaKey Somente leitura: Returns true if the meta key was down when the mouse event was fired.
MouseEvent.movementX Somente leitura: The X coordinate of the mouse pointer relative to the position of the last mousemove event.
MouseEvent.movementY Somente leitura: The Y coordinate of the mouse pointer relative to the position of the last mousemove event.
MouseEvent.offsetX Somente leitura: The X coordinate of the mouse pointer relative to the position of the padding edge of the target node.
MouseEvent.offsetY Somente leitura: The Y coordinate of the mouse pointer relative to the position of the padding edge of the target node.
MouseEvent.pageX Somente leitura: The X coordinate of the mouse pointer relative to the whole document.
MouseEvent.pageY Somente leitura: The Y coordinate of the mouse pointer relative to the whole document.
MouseEvent.relatedTarget Somente leitura: The secondary target for the event, if there is one.
MouseEvent.screenX Somente leitura: The X coordinate of the mouse pointer in screen coordinates.
MouseEvent.screenY Somente leitura: The Y coordinate of the mouse pointer in screen coordinates.
MouseEvent.shiftKey Somente leitura: Returns true if the shift key was down when the mouse event was fired.
MouseEvent.mozInputSource Non-standard Somente leitura: The type of device that generated the event (one of the MOZ_SOURCE_* constants). This lets you, for example, determine whether a mouse event was generated by an actual mouse or by a touch event (which might affect the degree of accuracy with which you interpret the coordinates associated with the event).
MouseEvent.webkitForce Non-standard Somente leitura: The amount of pressure applied when clicking.
MouseEvent.x Somente leitura: Alias for MouseEvent.clientX.
MouseEvent.y Somente leitura: Alias for MouseEvent.clientY.

Exemplos

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

HTML

html

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

JavaScript

const test = document.getElementById("test");

// This handler will be executed only once when the cursor
// moves over the unordered list
test.addEventListener(
  "mouseenter",
  (event) => {
    // highlight the mouseenter target
    event.target.style.color = "purple";

    // reset the color after a short delay
    setTimeout(() => {
      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",
  (event) => {
    // highlight the mouseover target
    event.target.style.color = "orange";

    // reset the color after a short delay
    setTimeout(() => {
      event.target.style.color = "";
    }, 500);
  },
  false,
);

Resultado

Especificações

Specification
UI Events # event-type-mouseover
HTML Standard # handler-onmouseover

Compatibilidade com navegadores

BCD tables only load in the browser