A veces en un grupo de texto (un párrafo, por ejemplo), tenemos muchos enlaces, algunos queremos que destaquen más que otros. Seguimos dándole al coco y no podemos hacer nada para que esos enlaces destaquen sin estropear el diseño. ¿Porqué no ocultamos los menos importantes para que se muestren solo cuando pongamos el cursor encima del párrafo? Es una buena idea.

En esta entrada explicaremos como podemos mostrar u ocultar los enlaces que deseemos con CSS:

Código HTML:

<h2>Párrafo normal</h2>
<p>Lorem ipsum dolor sit amet, consectetur <a href="http://feeds2.feedburner.com/marcofolio" title="Subscribe to the feed">adipiscing elit</a>. Aenean dapibus ante id sem. Aenean eros. In vulputate semper augue. Vivamus nec ante a est pharetra lacinia. Cras euismod urna at massa. Fusce ac ipsum in mi volutpat lobortis. Etiam faucibus est vel nibh. Nullam orci tortor, hendrerit et, hendrerit sed, convallis sit amet, velit. <a href="http://feeds2.feedburner.com/marcofolio" title="Subscribe to the feed">Integer augue</a> metus, [...]</p>
<h2>Links cambian de color cuando nos posicionamos encima del párrafo (o elemento padre)</h2>
<p class="colorhover">Aenean non sem vel velit posuere laoreet. <a href="http://twitter.com/marcofolio" title="Follow me on Twitter">In hac habitasse</a> platea dictumst. Suspendisse posuere volutpat leo. <a href="http://feeds2.feedburner.com/marcofolio" title="Subscribe to the feed">Donec dictum</a>, ligula sed ultricies ultrices, lectus augue tempor orci, quis rhoncus lorem turpis ut velit. Nulla facilisi. Sed orci ligula, tempor non, tristique at, tempus id, orci. [...] </p>

Esto es un ejemplo (puede haber muchas variantes), pero valdrá para darnos una idea. Aquí se muestran dos párrafos, uno con enlaces normales, y otros con enlaces que cambian de color al mover el cursor encima del párrafo.

Código CSS

p { color:#888888; }
a { color:#718374; }
a:hover { color:#EEEEEE; }

Vamos a desmenuzar el código:
p: Color del texto del párrafo (sin enlace)
a: enlace normal (sin posicionarse encima)
a: hover (Color del enlace cuando nos posicionamos encima de un enlace normal)
Ahora el código CSS especial para mostrar u ocultar enlaces al posicionarnos encima del párrafo:

/* Escondemos los enlaces al darle el mismo color que el texto normal */
.colorhover a { text-decoration: none; color:#888888; }
.colorhover:hover a { color:#718374; text-decoration: underline; }
.colorhover:hover a:hover { color:#EEEEEE; }

En Internet Explorer 6 este truco no funciona ya que solo limita la funcionalidad hover de los enlaces a anchor tags. Con un poco de JQuery podremos resolver este pequeño problema:

// CSS para anchors mientras nos posicionamos encima del párrafo (o elemento padre)

var csshover = { 'color' : '#718374', 'text-decoration' : 'underline' };
// CSS  para anchors cuando no estamos encima del párrafo (o elemento padre)
var cssclear = { 'text-decoration' : 'none', 'color' : '#888888' }
$(".colorhover").hover(
   function() {
       // CSS que se aplica a todos los anchors dentro del párrafo (o elemento padre) mientras nos posicionamos encimaapply css to all anchors inside parent while hovering
      $(this).find("a").css(csshover);
   },
   function() {
       // CSS que se aplica a todos los anchors dentro del párrafo (o elemento padre) cuando no estamos posicionándonos encima
      $(this).find("a").css(cssclear);
   }
);

Estandarización

CSS 2.1 válido

XHTML 2.1 válido

Ejemplo de su funcionamiento

A continuación un ejemplo de su funcionamiento

¿Qué os ha parecido?

Vía | Marcofolio