Al pasar el mouse aparece una cajita

por **Sakura92** Sáb Abr 06, 2013 7:02 pm

TUTORIAL REALIZADO POR PYRITE WOLF DE SOURCECODE

Al pasar el mouse, aparece una cajita

Oye! Espera un segundo.
No sé si me recuerdas pero soy esa tonta persona que no pide crédito por sus tutoriales. Así que si estás pensando en dejar link para autentificar el crédito y colocarme en algún rincón de tu foro ¡alto, humano! No es necesario (: Tampoco es necesario postear para ver los codes ni nada de eso.

Ya, muchos habrán visto el efecto de que al pasar el mouse sobre un elemento, ya sea una imagen o una caja o lo que sea, sale una simpática cajita. El resultado sería esto:

Pasa tu mouse

¿Me veo cool o qué?

1. El HTML

Para hacer este efecto, requeriremos colocar un poco de HTML en el lugar donde querramos colocarlo:

Código:: <div id="code1">Elemento sobre el que se pasará el mouse (?)<div id="code2">Elemento que saldrá al pasaar el mouse</div></div>

En este ejemplo tenemos dos elementos: aquel sobre el cual se pasará el mouse, que puede ser un texto, una imagen o cualquier cosa, al cual llamaremos #code1; y un segundo elemento que será el que saldrá al pasar el mouse, a llamarse #code2. Puedes repetir este código cuantas veces quieras.

2. El CSS

¿Y ahora? Ahora agregamos algo de CSS a la fórmula.

Código:: #code1 { position: relative; display: inline-block;} #code2 { display: none; position: absolute; top: XXpx; left: ZZpx; } #code1:hover #code2 { display: block; }

Cabe aclarar que este código no incluye un estilo de caja. Si quieres que las cosas salgan en cajas bonitas, puedes emplear los conocimientos impartidos en este otro tuto, modificando a #code1 y #code2 a gusto.

Donde dice top: XXpx; deberás colocar la distancia a partir del borde superior de la primer caja a la que quieres que esté la caja que se mostrará. Donde dice left: ZZpx; deberás colocar la distancia a partir del borde izquierdo de la primera caja a la que quieres que esté la caja que se mostrará.

Y esto, señoras y señores, es todo (: Les recuerdo que si colocarán esto en un módulo deberían colocar #left,#right {overflow: visible !important;} para evitarse problemas. Cualquier duda, consulta, conflicto, por favor avisa ^^