"Link List Block Hover"

Lo que significa que al pasar el ratón sobre un bloque de vínculo, haremos un efecto "hover" sobre él. La verdad es que me parece bastante guapo el truco, que es cosa de smileycat. Podéis ver también una prueba en esta entrada.

Es muy facilín: Lo importante es el CSS (que cada quien arreglará a su manera, claro está):

#links {
margin-top: 40px;
}

#links ul {
list-style-type: none;
width: 400px;
}

#links li {
border: 1px dotted #999;
border-width: 1px 0;
margin: 5px 0;
}

#links li a {
color: #990000;
display: block;
font: bold 120% Arial, Helvetica, sans-serif;
padding: 5px;
text-decoration: none;
}

* html #links li a {
width: 400px;
}

#links li a:hover {
background: #ffffcc;
}

#links a em {
color: #333;
display: block;
font: normal 85% Verdana, Arial, Helvetica, sans-serif;
line-height: 125%;
}

#links a span {
color: #125F15;
font: normal 70% Verdana, Arial, Helvetica, sans-serif;
line-height: 150%;
}

.- HTML:

<div id="links">

<ul>

<li><a href="http://cafe-junio.blogspot.com/2009/01/peek-boo-leer-mas-con-efectos-prototype.html" title="Lee esta entrada">Peek-A-Boo (leer más) con efectos (prototype)

<em>Ni siquiera recuerdo cuándo lo ví, pero sí que fue antes de que anduviera echando el ojo a librerías como Mootools o Query. Entonces ya nos ofrecía la posibilidad de tener un "leer más" con efecto "fade" Hackosphere.</em>

<span>Enero 25, 2009</span></a></li>

<li><a href="http://cafe-junio.blogspot.com/2009/01/expandoimage.html" title="lee esta entrada">Expandoimage

<em>Bien... pues es otra forma de agrandar o expander las imágenes; y no está nada mal, la verdad: Pasad el ratón sobre alguna de las imágenes de esta entrada o id directamente a la página de dynamicdrive donde, además de ver la demo, podéis descargarosa el script expando.js.</em>



</ul>

</div>

Sencillo, sencillo...