13 - Evento hover.

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

Como decíamos es común 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

<html>
<head>
<title>Problema</title>
<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript" src="funciones.js"></script>
</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> 
</body> 
</html>

funciones.js

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

function inicializarEventos()
{
  var x;
  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:

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


Retornar