Evento de mouseover em JavaScript

O evento mouseover ocorre quando um dispositivo apontador move o cursor em direção a um elemento em uma página da web.

Neste tutorial, implementaremos o evento mouseover usando JavaScript.

Para isso, podemos usar o addEventListener() para adicionar o evento de mouseover necessário sobre o elemento necessário.

Veja o exemplo abaixo.

• HTML

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

• JavaScript

let test = document.getElementById('example');

test.addEventListener('mouseover', function(event) {
  // highlight the mouseover target
  event.target.style.color = 'red';
}, false);

test.addEventListener('mouseout', function(event) {
  // highlight the mouseout target
  event.target.style.color = 'black';
}, false);

No código acima, recuperamos o elemento necessário sobre o qual desejamos mover o cursor usando a função getElementById(). Em seguida, passamos a aplicar o método addEventListener() a esse elemento, que anexa um determinado manipulador de eventos a esse elemento.

Quando o evento fornecido é enviado ao destino, o método EventTarget addEventListener() cria uma função que será chamada. Aqui, os métodos mouseover e mouseout são invocados, respectivamente.

O evento mouseover move o cursor para o elemento dado. O evento mouseout move o cursor para longe deste elemento.

A propriedade event.target.style.color especifica a cor na chamada dos métodos de destino específicos, como mouseover ou mouseout.