Efecto hover sobre bloque para una lista de links

Esta es la traducción al castellano del articulo “How to Create a Block Hover Effect for a List of Links“ El ejemplo Vea primero mi ejemplo y desplácese sobre los elementos de la lista para ver el “efecto sobre bloque” en acción. El código El HTML es bastante simple. Debido a que IE solo soporta elementos “:hover” para links, el ancla del link necesita ir alrededor del texto en los items de la lista. Necesitamos tener “hooks” adicionales para poder darle estilo al contenido. Lo hacemos usando las etiquetas <em> y <span>.

<div id="links">
<ul>
<li><a href="http://ervdesign.net/blog/#" title="Text">Link Heading One
<em>Description of link.</em>
<span>Date posted</span></a></li>
<li><a href="http://ervdesign.net/blog/#" title="Text">Link Heading One
<em>Description of link.</em>
<span>Date posted</span></a></li>
</ul>
</div>

Y ahora el CSS Para que la orden de efecto “hover” sobre el bloque, funcione correctamente en IE, necesitamos dar un “width” al link, igual que el “item” de la lista. De lo contrario, el efecto “hover” no se mostraría cuando pasas el ratón por encima de los elementos de la lista.

#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 {  /* make hover effect work in IE */
width: 400px;
}
#links li a:hover {
background: #ffffcc;
}
#links a em {
color: #333;
display: block;
font: normal 85% Verdana, Helvetica, sans-serif;
line-height: 125%;
}
#links a span {
color: #125F15;
font: normal 70% Verdana, Helvetica, sans-serif;
line-height: 150%;
}

No es necesariamente la mejor semántica de marcado del mundo, especialmente con estas etiquetas <span>, pero no estoy seguro de cómo hacerlo de otra forma.

Redactado por Ervdesign
http://ervdesign.net/blog/?p=8