Evento de mouseover en JavaScript

El evento de mouseover ocurre cuando un dispositivo señalador mueve el cursor hacia un elemento en una página web.

En este tutorial, implementaremos el evento mouseover usando JavaScript.

Para esto, podemos usar el addEventListener() para agregar el evento de mouseover requerido sobre el elemento requerido.

Mira el ejemplo a continuación.

• 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);

En el código anterior, recuperamos el elemento requerido sobre el cual deseamos mover el cursor usando la función getElementById(). Luego procedemos a aplicar el método addEventListener() a este elemento, que adjunta un controlador de eventos dado a este elemento.

Cuando el evento proporcionado se envía al objetivo, el método EventTarget addEventListener() crea una función que será invocada. Aquí se invocan los métodos mouseover y mouseout, respectivamente.

El evento mouseover mueve el cursor al elemento dado. El evento mouseout aleja el cursor de este elemento.

La propiedad event.target.style.color especifica el color al invocar los métodos de destino específicos, como mouseover o mouseout.