Efecto en los enlaces al pasar el cursor o puntero por encima

Una pseudo-clase permite tener en cuenta diferentes condiciones o eventos al definir una propiedad para una etiqueta HTML.

La pseudo clase a:hover se utiliza cuando el puntero o cursor del ratón pasa por encima de un enlace.

Esta pseudo-clase puede usarse para crear diversos efectos interesantes. Por ejemplo, si queremos que nuestros enlaces adopten un color verde y estén subrayados por un borde punteado cuando el cursor pase sobre ellos, el código CSS a utilizar será el siguiente:

a:hover {
color: #258a1e;
border-bottom:1px dotted #258a1e;
text-decoration:none;
}

El bloque puede incluirse en tu plantilla -justo antes de la etiqueta ]]></b:skin> (al igual que haríamos al añadir cualquier código CSS)- y conseguir así el efecto en todos los enlaces del blog.

La línea color: #258a1e; establece el color que tendrá el enlace mientras que border-bottom:1px dotted #258a1e; establece un borde superior con 1 píxel de ancho, de estilo dotted (punteado) y en color verde (el mismo que utilizamos para el color del texto).

text-decoration:none; es utilizado para deshacernos del borde inferior que aparece al pasar el cursor por encima de la mayoría de enlaces.

Pasa el puntero por el siguiente enlace y comprobarás el resultado:

Esto es un enlace.

Siguiendo el mismo esquema de CSS podemos aplicar efectos a determinados enlaces, que diferenciaremos con nombres únicos.

.blEnlace1:hover{
color: #258a1e;
border-bottom:1px dotted #258a1e;
text-decoration:none;
}

Como puedes ver, la a de la pseudo clase a:hover ha sido reemplazada por el término blEnlace1, que es atribuido a todos los enlaces agrupados bajo este.

¿Y cómo agrupo los enlaces por términos? Es muy sencillo. Una vez hayas incluido el CSS en la plantilla, bastará con introducir la propiedad class en la sintaxis que forma un enlace:

<a class="blEnlace1" href="URL PAGINA">Este es mi enlace</a>

URL PAGINA contendría la dirección del sitio web al que conducirá el vínculo y Este es mi enlace, el título que visualizará el lector.

Haciendo uso de varios nombres tendremos la posibilidad de usar propiedades distintas con cada enlace.

Este otro bloque de código CSS con un término distinto nos ofrece un color de texto y borde rosa.

.blEnlace2:hover{
color: #d84bc3;
border-bottom:1px dotted #d84bc3;
text-decoration:none;
}

Para ello hemos tenido que editar el valor hexadecimal que representaba al color verde (#258a1e) e incluir el del rosa (#d84bc3).

Notarás el efecto al pasar el puntero por estos enlaces:

Enlace en color verde.
Enlace en color rosa.

La apariencia puede editarse cambiando los términos del código CSS. Por ejemplo, para obtener un enlace con fondo en color negro y texto en color blanco al pasar el cursor utilizaría esto:

.blEnlace3:hover{
color: #ffffff;
background:#000000;
text-decoration:none;
}

blEnlace3 por tratarse de un tercer estilo (si utilizara blEnlace1 o blEnlace2, no se obtendrían cambios y nuestro link poseería las mismas propiedades que el enlace 1 o el enlace 2).

color: #ffffff; para hacer que el texto se muestre en color blanco.

background:#000000; para aplicar un color de fondo (en este caso negro: #000000) al texto.

text-decoration:none; para, tal y como expliqué anteriormente, deshacernos del subrayado en el enlace.

Resultado:

Enlace con fondo en color.

Con la propiedad background puede utilizarse también una imagen de fondo...

.blEnlace4:hover{
background: url("URL IMAGEN") no-repeat scroll right center transparent;
padding: 4px;
text-decoration: none;
}

Tan solo es necesario incluir la dirección del icono o imagen que aparecerá en donde dice URL IMAGEN y listo.

La línea padding: 4px; se utiliza para aumentar la distancia entre el enlace y el fondo, como si utilizásemos un marco con borde transparente.

Enlace de ejemplo

Notas:

- El cambio de color del texto de los enlaces de ejemplo al pasar el cursor no se produce debido a las propiedades CSS que tiene la plantilla del Balcón. Esto no significa que en tu sitio web ocurra tal cosa.

- La tabla de colores es fundamental para obtener el código de cualquier color y poder así editar el CSS.