|
Subrayado de enlaces (II) |
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:
 |
Publicado por: Administrador |
|
|
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 unico que se tiene que hacer es poner en el head:
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.
Lo use en algunas de mis paginas y queda bastante bonito. Saludos, Marco
