Efectos hover al estilo Twitter

Me preguntaron si era posible usar un efecto similar al que se ve en páginas como Twitter, es decir, que ciertos íconos o enlaces permanezcan ocultos hasta que ponemos el mouse encima de cierta área:



Esto es posible reproducirlo con bastante facilidad, la estructura del código HTML sería algo así:
<div class="recuadroC">
... lorem ipsum dolor sit amet ...
<span class="iconos">
<div>
<a href="laQueQueremosHacer" class="enlaceIco"> </a>
</div>
</span>
</div>
En resumen, un bloque DIV con cualquier contenido, dentro el cual colocamos una etiqueta SPAN y otro bloque DIV con los íconos que servirán de enlaces. La clave de todo está en las definiciones CSS. Un par de ejemplos:

Fusce augue? Fusce magna. In mi. Etiam aliquet porttitor ligula. Curabitur auctor ultricies lectus. Donec placerat. Pellentesque convallis quam sit amet diam! Curabitur lectus. Duis rutrum placerat leo. Fusce euismod nibh sit.

Fusce augue? Fusce magna. In mi. Etiam aliquet porttitor ligula. Curabitur auctor ultricies lectus. Donec placerat. Pellentesque convallis quam sit amet diam! Curabitur lectus. Duis rutrum placerat leo. Fusce euismod nibh sit.

<style>
.recuadroC { /* el bloque */
cursor: pointer;
padding: 10px 30px 10px 10px; /* el contenido no debe ocupar todo el bloque */
position: relative; /* esta es la propiedad clave */
width: valorpx;
}
.recuadroC .iconos { /* el bloque del SPAN */
position: absolute; /* lo ubicamos dentro del DIV */
right: 5px; /* lo ponemos a la derecha */
top: 5px; /* los valores pueden ser otros */
}
.recuadroC a { /* los enlaces serán imágenes */
background: transparent url() no-repeat 50% 50%;
display: block;
height: valorpx; /* el alto de la imagen */
visibility: hidden; /* lo hacemos invisible */
width: valorpx; /* el ancho de la imagen */
}
.recuadroC a.enlaceIco { /* es la imagen */
background-image: url(URL_imagen);
}
.recuadroC:hover {
/* cualquier propiedad */
}
.recuadroC3:hover a.enlaceIco { /* cuando ponemos el mouse encima */
visibility: visible; /* lo hacemos visible */
}
</style>

Este es un ejemplo concreto ...

0 comentarios:

Publicar un comentario