CSS Tips #1 Ocultar Mensajes

Con CSS podemos crear efectos muy bonitos prescindiendo de javascript con lo que ganaremos en accesibilidad.

Necesitaremos este código:

<p>Aqui puedes probar un <a class="sms" href="#">Enlace<span>
con mensaje oculto</span></a> sin javascript</p>
<p>Válido y totalmente accesible</p>

Ocultando el <span> dentro del enlace para mostrarlo cuando pasemos por encima.

Este será el codigo css necesario:

a.sms {
position:relative;
text-decoration:underline;
}

a.sms span {
font-size:12px;
position:absolute;
display: none;
left: 0px;
top: 10px;
width: 150px;
height: auto;
padding: 30px 10px 10px 10px;
color: #fff;
background: url('fnd-sms.gif') no-repeat left top;
cursor: default;
}

a.sms:hover span {
display: block;
}

Ejemplo
Aqui puedes probar un Enlace con mensaje oculto sin javascript
Válido y totalmente accesible