Práctica con eventos de ratón en jQuery, en la que mostraremos el uso de mouseenter y mouseleave, junto con el objeto evento, para averiguar la posición del ratón.
Como ya debemos de conocer, si hemos leído hasta este punto el Manual de jQuery, existen diversos eventos que se invocan al realizar acciones con el ratón, como clics, movimiento del puntero o posicionar el puntero sobre ciertos elementos. En este artículo utilizaremos mouseenter y mouseleave, que son los eventos más interesantes y útiles si queremos detectar el momento en el que entramos con el puntero del ratón sobre un elemento o salimos de su superficie.
Además, utilizaremos el objeto evento, que recibe la función con la que implementamos el manejador del evento, que tiene diversos datos útiles sobre el evento que se acaba de ejecutar. En este artículo mostraremos cómo averiguar la posición del ratón en el momento de producirse el evento, que podemos extraer con las propiedades pageX y pageY del objeto evento.
Efecto de tip simple en jQuery con los eventos mouseenter y mouseleave
En el artículo anterior mostramos cómo averiguar la posición del ratón al hacer clic en un elemento. Así que ahora vamos a utilizar esos conocimientos para hacer un sencillo ejemplo de eventos donde crearemos un típico efecto de tip. Para realizar este efecto tendremos dos elementos, el primero será un elemento visible en todo momento y el segundo será un elemento oculto, el tip, que se mostrará sólo al pasar el ratón sobre el primer elemento.Para realizar cosas cuando el ratón entra y sale de un elemento, utilizaremos los manejadores de eventos de jQuery mouseenter y mouseleave, que se producen al entrar con el ratón sobre un elemento y al salir del elemento respectivamente. Así pues, los eventos mouseenter y mouseleave los tendremos que crear sobre el elemento que permanece siempre visible, mostrando y ocultando la capa que contiene el tip.
Veamos antes que nada el HTML que tendremos, con el elemento visible y su tip.
<div id="elemento1" style="background-color: #ccccff; padding: 5px;">Pasa el ratón por encima de este "elemento1".</div>
<div class="tip" id="tip1">Esto es para explicar algo sobre el elemento1</div>
Además, al tip le hemos aplicado estilos por medio de CSS:
background-color: #ffcc99;
padding: 10px;
display: none;
position: absolute;
Los estilos importantes aquí son display: none; (para que el elemento esté oculto inicialmente) y position: absolute; (para que lo podamos posicionar libremente por la página y sin afectar a otros elementos).
Veamos ahora el código del evento mouseenter:
$("#elemento1").mouseenter(function(evento){
$("#tip1").css("left", evento.pageX + 5);
$("#tip1").css("top", evento.pageY + 5);
$("#tip1").css("display", "block");
});
Simplemente cambiamos las propiedades de CSS "left" y "top" de la capa del tip, asignando valores a través de evento.pageX y evento.pageY, las propiedades del objeto evento que nos dan la posición del ratón. Con esto situamos la capa del tip en un lugar próximo a donde estaba el ratón.
Luego se cambia el atributo de CSS display de la capa del tip, al valor "block", que sirve para que ese elemento se vea en la página.
Ahora veamos el evento mouseleave, para realizar acciones cuando sacamos el ratón de encima de un elemento.
$("#elemento1").mouseleave(function(e){
$("#tip1").css("display", "none");
});
Simplemente cambiamos la propiedad CSS display del tip, para el valor "none", que hace que esa capa desaparezca de la página.
Veamos el código completo de una página que implementa este mecanismo para producir tips en jQuery.
<html>
<head>
<title>Trabajando con eventos - Tip simple</title>
<style type="text/css">
.tip{
background-color: #ffcc99;
padding: 10px;
display: none;
position: absolute;
}
</style>
<script src="../jquery-1.4.1.min.js"></script>
<script>
$(document).ready(function(){
$("#elemento1").mouseenter(function(e){
$("#tip1").css("left", e.pageX + 5);
$("#tip1").css("top", e.pageY + 5);
$("#tip1").css("display", "block");
});
$("#elemento1").mouseleave(function(e){
$("#tip1").css("display", "none");
});
$("#elemento2").mouseenter(function(e){
$("#tip2").css("left", e.pageX + 5);
$("#tip2").css("top", e.pageY + 5);
$("#tip2").css("display", "block");
});
$("#elemento2").mouseleave(function(e){
$("#tip2").css("display", "none");
});
})
</script>
</head>
<body>
<h1>Trabajando con eventos en jQuery</h1>
<div id="elemento1" style="background-color: #ccccff; padding: 5px;">Pasa el ratón por encima de este "elemento1".</div>
<p>
Este texto es para poner <a id="elemento2" href="#">otro elemento con tip</a>.
</p>
<div class="tip" id="tip1">Esto es para explicar algo sobre el elemento1</div>
<div class="tip" id="tip2">Explico mejor este otro elemento con tip!!</div>
</body>
</html>
Ahora podemos ver el ejercicio en marcha.
Con esto estamos aprendiendo un poco más sobre eventos en jQuery. Hemos visto un par de aplicaciones interesantes de eventos de ratón, concretamente mouseenter y mouseleave Pero aun nos quedan bastantes cosas por ver que dejaremos para próximos artículos.
Miguel Angel Alvarez
Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...