Efecto hover con CSS para una lista de Links

Efecto hover con CSS  para una lista de Links

Css- Online | Publicación:2013 | Free

Descripción:
Les comparto este tutorial como darle un estilo y efecto a nuestros links de las webs que creamos para asi tener una mejor apariencia.
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>. 

Creamo el div que contendrá nuestros links
<div id="links"> <ul> <li><a href="http://ellasyellas.com" title="Text">Link Heading One <i>Descripcion de Link.</i> <span>Descripcion</span></a></li> <li><a href="http://detodoprogramas.com" title="Text">Link Heading One <i>Descripcion de Link.</i> <span>Descripcion</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 b { color: #125F15; font: normal 70% Verdana, Helvetica, sans-serif; line-height: 150%; }

Nota: si deseamos qye nuestros link abran en otra pestaña tendremos que agregarle depues de cada link target="_blank" como por ejemplo si quiero que la páginas http://ellasyellas.com se abra en otra quedará algo asi <a href="http://ellasyellas.com"target="_blank"></a> y listo.

El Resultado sería este: