 |
Evento hover en jQuery
Método hover()
El método hover () especifica dos funciones para ejecutar cuando el puntero del mouse pasa sobre los elementos seleccionados.
Este método activa los eventos mouseenter y mouseleave .
Nota: Si solo se especifica una función, se ejecutará para los eventos mouseenter y mouseleave.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").hover(function(){
$(this).css("background-color", "gold");
}, function(){
$(this).css("background-color", "salmon");
});
});
</script>
</head>
<body>
<p>Pase el puntero del mouse sobre este parrafo.</p>
</body>
</html>
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.
<!DOCTYPE html> <html> <head> <title>Ejemplo de jQuery</title> <meta charset="UTF-8"> </head> <body> <a href="https://www.todo-argentina.net/">Todo Argentina</a> <br> <a href="https://www.google.com/">Google</a> <br> <a href="https://www.pagina12.com.ar/">Página 12</a> <br> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script src="func13.js"></script> </body> </html>
func13.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);