mouseover

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

Informações Gerais

Especificação

DOM L3

Interface
MouseEvent
Bubbles

Sim

Cancelable

Sim

Alvo

Element

Ação Padrão

None

Propriedades

Property Type Description
target Somente leitura EventTarget O evento alvo(o mais alto alvo na arvore do DOM).
type Somente leitura DOMString The type of event.
bubbles Somente leitura Boolean Whether the event normally bubbles or not
cancelable Somente leitura Boolean Whether the event is cancellable or not
view Somente leitura WindowProxy document.defaultView (window of the document)
detail Somente leitura long (float) 0.
currentTarget Somente leitura EventTarget The node that had the event listener attached.
relatedTarget Somente leitura EventTarget For mouseover, mouseout, mouseenter and mouseleave events: the target of the complementary event (the mouseleave target in the case of a mouseenter event). null otherwise.
screenX Somente leitura long The X coordinate of the mouse pointer in global (screen) coordinates.
screenY Somente leitura long The Y coordinate of the mouse pointer in global (screen) coordinates.
clientX Somente leitura long The X coordinate of the mouse pointer in local (DOM content) coordinates.
clientY Somente leitura long The Y coordinate of the mouse pointer in local (DOM content) coordinates.
button Somente leitura unsigned short This is always 0 as no button presses trigger this event (mouse movement does).
buttons Somente leitura unsigned short The buttons depressed when the mouse event was fired: Left button=1, Right button=2, Middle (wheel) button=4, 4th button (typically, "Browser Back" button)=8, 5th button (typically, "Browser Forward" button)=16. If two or more buttons are depressed, returns the logical sum of the values. E.g., if Left button and Right button are depressed, returns 3 (=1 | 2). More info.
mozPressure Somente leitura float The amount of pressure applied to a touch or tabdevice when generating the event; this value ranges between 0.0 (minimum pressure) and 1.0 (maximum pressure).
ctrlKey Somente leitura boolean true if the control key was down when the event was fired. false otherwise.
shiftKey Somente leitura boolean true if the shift key was down when the event was fired. false otherwise.
altKey Somente leitura boolean true if the alt key was down when the event was fired. false otherwise.
metaKey Somente leitura boolean true if the meta key was down when the event was fired. false otherwise.

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>

Compatibilidade com navegadores

BCD tables only load in the browser

See also