 |
Eventos mouseover y mouseout
Método mouseout ()
El evento mouseout ocurre cuando el puntero del mouse abandona el elemento seleccionado.
El método mouseout () activa el evento mouseout o adjunta una función para que se ejecute cuando ocurre un evento mouseout.
Nota: A diferencia del evento mouseleave , el evento mouseout se activa si el puntero del mouse deja cualquier elemento secundario, así como el elemento seleccionado. El evento mouseleave solo se activa cuando el puntero del mouse abandona el elemento seleccionado. Vea el ejemplo al final de la página para una demostración.
Sugerencia: este evento se usa a menudo junto con el evento de mouseover .
Método mouseover ()
El evento mouseover ocurre cuando el puntero del mouse está sobre el elemento seleccionado.
El método mouseover () activa el evento mouseover o adjunta una función para que se ejecute cuando ocurre un evento mouseover.
Nota: A diferencia del evento mouseenter , el evento mouseover se activa si el puntero del mouse ingresa cualquier elemento secundario, así como el elemento seleccionado. El evento mouseenter solo se activa cuando el puntero del mouse ingresa al elemento seleccionado. Vea el ejemplo al final de la página para una demostración.
Sugerencia: este evento se usa a menudo junto con el evento mouseout .
Establece el color de fondo en gris, cuando el puntero del mouse deje un elemento y coloca el color de fondo en amarillo, cuando el puntero del mouse esté sobre un elemento<p>:
<!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").mouseover(function(){
$("p").css("background-color", "yellow");
});
$("p").mouseout(function(){
$("p").css("background-color", "lightgray");
});
});
</script>
</head>
<body>
<p>Mueva el puntero del mouse sobre este parrafo.</p>
</body>
</html>
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="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/">Pagina 12</a> <br> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script src="func12.js"></script> </body> </html>
func12.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");
}