Este es un pequeño truco que al pasar el mouse por un mensaje, automáticamente mostraría otro (efecto Hover). Este efecto consiste en la alteración del aspecto de un elemento, ya sea de texto o imagen, que cuando se sitúa el puntero sobre el mismo, sin ser seleccionado este varía.
Basta con copiar y pegar el siguiente código en un elemento HTML y modificar algunos detalles que explicaré luego de la colocación del mismo para personalizarlo a gusto.
<style>
.cambiar big {color:#CC0000;font-family:verdana;font-size:12pt;font-weight:normal;
text-decoration:none;display:inline;}
.cambiar a {color:#00CCCC; font-family:verdana;font-size:12pt;font-weight:normal;
text-decoration:none;display:inline;}
.cambiar a span {display:none;text-decoration:none;}
.cambiar a:hover span {color: #0000CC;display:block;text-decoration:none;
background-color:transparent;display:inline;}
.cambiar a:hover big {display:none;text-decoration:none;}
</style>
<div class="cambiar" style="text-align:center;">
<a href="">
<big>
<b>Este es el primer texto que aparecere.</b>
</big>
<span>
<b>Este es el segundo texto que aparecere.</b>
</span>
</a>
</div>
Este código #CC0000 es el color del primer texto y #0000CC este el del segundo. Si quieren más colores consulten en Códigos de Colores Hexadecimales.
Font-Family: Es el tipo de letra, puedes cambiarla por la letra que más te guste.
Font-Size: Es el tamañano de la letra.
Si has encontrado útil este artículo puedes compartirlo desde tu blog, página Web o foro.
0 comentarios:
Publicar un comentario
Gracias por tus comentarios. Si tienes una consulta sobre tu blog deja tu nombre y la dirección del mismo.