13 - Evento hover.


jQuery no solo mapea los eventos del DOM sino que provee otros que combinan estos.

Como decíamos es habitual utilizar los eventos mouseover y mouseout en común, por eso en jQuery existe un evento llamado hover que tiene dos parámetros:

$(elemento).hover([función de ingreso del mouse],[función de salida del mouse])

Es decir que al evento hover asociamos dos funciones, la primera se ejecuta cuando ingresamos la flecha del mouse dentro del elemento y la segunda cuando retiramos la flecha del mouse.

Confeccionaremos el mismo problema del concepto que vimos los eventos mouseover y mouseout.

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.hover(entraMouse, saleMouse);
}

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

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

Utilizamos solamente el evento hover para cambiar el color de fondo del ancla cuando se ingresa la flecha del mouse y retornarla al color original cuando se sale:

  let x = $("a");
  x.hover(entraMouse, saleMouse);


Retornar