12 - Eventos mouseover y mouseout.

Los eventos de JavaScript onmouseover y onmouseout son los equivalentes mouseover y mouseout de jQuery. Estos eventos están generalmente unidos. El primero se dispara cuando ingresamos la flecha del mouse a un elemento HTML y el segundo cuando sacamos la flecha del control.

Para probar estos dos eventos implementaremos una página que contenga tres botones y cuando ingrese la flecha del mouse al botón cambiaremos el color de texto del mismo, retornando el color original cuando retiramos la flecha del control.

Implementaremos una página que contenga tres hipervínculos, cuando ingrese la flecha del mouse al hipervínculo cambiaremos el color de fondo, retornando el color original cuando retiramos la flecha del elemento.

pagina1.html

<!DOCTYPE html>
<html>

<head>
  <title>Ejemplo de jQuery</title>
  <meta charset="UTF-8">
</head>

<body>
  <a href="http://www.lavoz.com.ar">La Voz del Interior</a>
  <br>
  <a href="http://www.lanacion.com.ar">La nación</a>
  <br>
  <a href="http://www.clarin.com.ar">El clarín</a>
  <br>

  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  <script src="funciones.js"></script>
</body>

</html>

funciones.js

let x = $(document);
x.ready(inicializarEventos);

function inicializarEventos() {
  let x = $("a");
  x.mouseover(entraMouse);
  x.mouseout(saleMouse);
}

function entraMouse() {
  $(this).css("background-color", "#ff0");
}

function saleMouse() {
  $(this).css("background-color", "#fff");
}

Lo primero que hacemos es asignar las funciones a ejecutarse cuando ocurren los evento mouseover y mouseout:

  let x = $("a");
  x.mouseover(entraMouse);
  x.mouseout(saleMouse);

La función entraMouse accede al elemento que recibe en su interior el mouse (la obtenemos mediante la referencia que guarda this) y cambia el color de la propiedad text-background del CSS:

function entraMouse() {
  $(this).css("background-color", "#ff0");
}

De forma similar la función saleMouse retorna al color original:

function saleMouse() {
  $(this).css("background-color", "#fff");
}


Retornar