Está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.
|