espaciador Tutorial gratuito online en castellanoEstás en: HTML» Trucos » mouse over

Trucos y preguntas frecuentes sobre diseño en HTML

¿Cómo puedo hacer que los enlaces tengan efecto mouse over?

Si no tienes nociones de aplicación de estilo CSS a las hojas HTML, aquí tienes una pequeña ayuda para que tus enlaces tengan efecto "hover" ( también llamado "mouse over). Copia y pega el código ya escrito dentro de la etiqueta <head> y observa el resultado. No olvides colocar algún enlace dentro de la etiqueta <body>.

Ejemplo:

<style type="text/css">
<!--
A:link {color: gray; text-decoration: none}
A:visited {color: blue; text-decoration: overline}
A:active {color: orange; text-decoration: line-through}
A:hover {color: red; text-decoration: underline} -->
</style>

Explicación:

A:link: Se refiere al enlace antes de que lo activemos
A:visited: Es el enlace ya visitado.
A:active: Es el enlace ya activado
A:hover: Efecto al pasar el ratón por encima del enlace.

Puedes cambiar los colores por otros a tu gusto (ver tabla de colores) y también el efecto text-decoration. Los valores que puedes utilizar para éste último son: none (ninguno), underline (subrayado), overline (con una linea superior) o line-through (tachado).

Con este método, perderás también de vista el color morado de los vínculos visitados.


logo distrito web


powered by FreeFind

¿Quieres ganar dinero con tu Blog o página web?

 

 
 

Estadisticas de visitas