Seguramente esto lo hayáis visto alguna vez, se trata de poner a una determinada capa un fondo, el cual reaccione al paso del ratón cambiando de color, es decir, un fondo con efecto Hover. Éste actuará como si se tratara de un enlace, pero claramente no lo es.
Funciona 100% con los navegadores Firefox, Ópera y Explorer.
Para ver mas claramente a lo que nos referimos podéis hechar un vistazo al ejemplo.
#contenido {
width: 220px;
margin: 0 auto;
margin-top: 25px;
padding: 25px;
overflow: auto;
border: 5px solid #FF0000;
}
#tab {
padding: 0;
margin: 25px 0 0 15px;
list-style: none;
}
#tab li {
display: inline;
padding: 0;
margin-right: 35px;
background: #f8f8f8;
float: left;
position: relative;
}
#tab li.recuadro {
width: 190px;
height: 350px;
border: 1px solid #888;
border-width: 1px 1px 1px 1px;
}
#tab li a.explorer-6 {
display: block;
width: 100%;
background: #f8f8f8;
position: relative;
}
#tab table {
border-collapse: collapse;
margin: -1px;
}
#tab li div {
padding: 20px 5px 5px 5px;
}
#tab li.recuadro:hover, #tab li.recuadro a.explorer-6:hover {
background: #fef;
}
<div id="contenido">
<ul id="tab">
<li class="recuadro">
<!--[if lte IE 6]><a class="explorer-6" href="nogo"><table><tr><td><![endif]-->
<div>
<p> Contenido recuadro </p>
</div>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
</div>
