jueves, 30 de octubre de 2014

Efecto de tip simple en jQuery con los eventos mouseenter y mouseleave - I

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.

No hay comentarios:

Publicar un comentario