Configurar enlaces » Efecto hover con CSS

Sabemos que el efecto hover produce un cambio al pasar el ratón sobre un elemento, el que vemos con más frecuencia es el efecto hover en enlaces. Subrayados, letra en negrita, iconos, texto adicional, cambio de color y un largo ect...
En general los enlaces de la plantilla los tenemos definidos en body { más o menos así:

a:link {
color:$linkcolor;
text-decoration:none;
}
a:visited {
color:$visitedlinkcolor;
text-decoration:none;
}
a:hover {
color:$titlecolor;
text-decoration:underline;
}

Al utilizar la opción de fuentes y colores automáticamente los colores quedan configurados sin necesidad de modificar la plantilla, si queremos añadir un color distinto al de la paleta que proporciona Blogger es necesario hacerlo manualmente.
Para ello hay que tener en cuenta lo siguiente:

» a:link "tal y como lo vemos"
» a:visited "enlace visitado"
» a:active "cuando se está pulsando"
» a:hover "con el cursor encima"

Cambiar de color es tan sencillo como sustituir por ejemplo color:$linkcolor; por color:#940f04;

Para conseguir el efecto hover es necesario añadir los estilos donde deseamos que se produzca el efecto.
Por ejemplo al pasar el ratón sobre el enlace vamos a añadir letra en negrita, pero antes eliminamos " text-decoration:underline;" ese estilo nos añade un subrayado.

a:hover {
color:$titlecolor;
font-weight:bold;
}

Para añadir color de fondo añadimos:

a:hover {
color:$titlecolor;
background:#940f04;
}

Normalmente los enlaces de una página guardan cierta similitud, sin embargo hay excepciones y añadimos un efecto discreto en las entradas y otros más vistosos en la sidebar.

Para ejemplos vistosos encontré algunos que me gustaron mucho.

Gem@ BLOG

Añadimos en CSS antes de ]]></b:skin> los estilos.

abbr[title]:after{
/*Workaround for Gecko*/
content: "";
}

abbr[title]:hover:after{
/*Shows the value of the title attribute when hovered*/
content: " (" attr(title) ")";
}

En HTML (en cualquier lugar donde deseamos añadir el efecto)

<abbr title="mensaje-de-texto">texto-visible</abbr>

Probando y jugando

También en CSS antes de ]]></b:skin>

strong:after,
#n2 strong:before{
/*Workaround for Gecko*/
content: "";
}
strong:hover:after{
content: "\00BB"
}
strong:hover:before{
content: "\00AB"
}

En HTML (en cualquier lugar donde deseamos añadir el efecto)

<strong>Probando y jugando</strong>

Es cuestión de gustos, de ideas y de ganas de jugar.