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;
<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");
});
No hay comentarios:
Publicar un comentario