1 .
Adoremos al estándar CSS2 (alabado sea)
2 .
Modo de empleo
El soporte de parte del estándar CSS2
tanto en Explorer 4 como en las nuevas versiones del futuro Netscape 5 nos permiten
realizar este truco de una manera mucho más sencilla.
Adoremos al estándar CSS2 (alabado sea)
En general, todas las propiedades de hojas
de estilo implementadas en los navegadores actuales responden al estándar
CSS1. Por el momento (con la posible exclusión del Mozilla de Netscape)
ningún navegador soporta este estándar por completo pero,
sin embargo, algunos interpretan algunas propiedades del CSS2.
Este nuevo estándar incluye muchas cosas
nuevas, incluyendo algunas pseudoclases que dan un comportamiento
dinámico a los enlaces. Entre ellas está la pseudoclase
hover.
Los enlaces siempre habían tenido
pseudoclases dependiendo del estado en que estuvieran: normal, ya visitado o
con el usuario pulsando sobre ellos. De este modo se podían modificar sus atributos
por medio de hojas de estilo al igual que se hacía antes desde la
etiqueta BODY. Esta nueva pseudoclase permite modificar
los atributos de un enlace cuando el usuario pasa el ratón por
encima del mismo.
Modo de empleo
El método es muy similar al que utilizabamos en la anterior entrega
para dejar sin subrayado a nuestros enlaces. En esta ocasión, además,
vamos a pintarlos de negro. Cuando el usuario pase el ratón por encima
se subrayarán y colorearán de azul. Estos son los estilos que
debemos incluir:
<STYLE TYPE="text/css">
A.link { text-decoration: none; color: black; }
A:hover.link { text-decoration: underline; color: blue; }
</STYLE>
Añadiendo a todas nuestras etiquetas
A el parámetro CLASS="link"
lograremos el efecto que buscamos:
Últimos comentarios
4 comentarios
cool.... (03/02/2004)
Por
esto es cool pero si quieres tener una clase con estas opciones es mejor asi:
.clase:link{text-decoration: none; cursor: default;}
.clase:visited{text-decoration: none; cursor: default;}
.clase:activate{text-decoration: none; cursor: default;}
.clase:hover{text-decoration: underline; cursor: default;}
lo mas sencillo (21/04/2001)
Por
lo unico que se tiene que hacer es poner en el head:
Otro ejemplo (26/02/2001)
Por
En mi página web (http://punk.iespana.es para quien la quiera visitar) he puesto parecido que creo q debe llevar menos trabajo:
A:link { COLOR: #FFBF00; TEXT-DECORATION: none }
A:visited { COLOR: #FFBF00; TEXT-DECORATION: none }
A:active { COLOR: #80FF00; TEXT-DECORATION: underline }
A:hover { COLOR: #80FF00; TEXT-DECORATION: underline }
Lo utilicé sobre una página que ya tenía con el primer script para subrayar enlaces, de ahí q tenga con casi todos los enlaces CLASS="link". Pero lo utilicé en otra nueva completamente, sin escribir e atributo de CLASS, y funcionaba igualmente de bien. Espero que sea de ayuda.
Muy bonito (25/11/2000)
Por
Lo use en algunas de mis paginas y queda bastante
bonito.
Saludos, Marco
Artículos
