Efecto

2 COMENTARIOS -  Publicado hace 47 meses -  Clasificado en: ,

El siguiente ejemplo muestra como conseguir un efecto de "sobre" o "hover", sobre elementos de una lista que conforman un bloque. Tanto el html como el CSS son bastante sencillos de entender y facilmente adaptables. He creado un par de clases para personalizar elementos del bloque pero se podrían añadir, restar o modificar las mismas.

HTML: 

<div id="Efecto_Hover">
<ul>
<li>
<a href="#">Cabecera numero uno
	<span class="descripcion">
	Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque nonummy, lorem eget scelerisque ullamcorper, pede lacus bibendum sapien, non pellentesque erat elit vitae lorem.
	</span>
<span class="categoria">CSS</span></a>
</li> 
<li>
<a href="#">Cabecera numero dos
	<span class="descripcion">
	Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque nonummy, lorem eget scelerisque ullamcorper, pede lacus bibendum sapien, non pellentesque erat elit vitae lorem.
	</span>
<span class="categoria">Photoshop</span></a>
</li> 
<li>
<a href="#">Cabecera numero tres
	<span class="descripcion">
	Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque nonummy, lorem eget scelerisque ullamcorper, pede lacus bibendum sapien, non pellentesque erat elit vitae lorem.
	</span>
<span class="categoria">Recursos</span></a>
</li> 
</ul>
</div>
CSS: 
#Efecto_Hover ul {
        list-style-type: none;
        width: 350px;
        margin:0px;
        padding:0px;
}
#Efecto_Hover li {
        border: 1px solid #999;
        border-width: 1px 0;
        margin: 5px 0px;
}
#Efecto_Hover li a { 
        color: #666;
        display: block;
        font: bold 16px Arial, Helvetica, sans-serif;
        padding: 2px;
        text-decoration: none;
}
* html #Efecto_Hover li a { 
        width: 350px;
}
#Efecto_Hover li a:hover {
        background: #E2E2E2;
}
#Efecto_Hover a .descripcion { 
        color: #333;
        display: block;
        font: normal 10px Verdana, Helvetica, sans-serif;
	ine-height: 125%; 
}
#Efecto_Hover a .categoria {
        color: #409209;
        font: normal 9px Verdana, Helvetica, sans-serif;
        line-height: 150%;
}

Algunas entradas relacionadas:

También te puede interesar:

COMENTARIOS

Publicado hace 6 meses
Pascual Fort -   http://www.anachespais.com

He implementado vuestra genial solución de css en la página principal de http://www.anachespais.com En Safari y Firefox funciona, pero en explorer no (Cambia de color pero no se pone la manita). ¿Es porqué trabajo con PHP?. ¿me podéis ayudar?.
Que debo poner para que funcione en Internet explorer
Publicado hace 6 meses
Francisco -   http://www.webintenta.com

Prueba a añadir en la instrucción "#Efecto_Hover li a", la instrucción "cursor:pointer;"

Saludos.
Haz un comentario

¡Gracias por dejar tu opinión! Por favor procura que tu comentarios sean apropiados respecto al tema tratado en la entrada; que no sean spam, u ofensivos, de otro modo, serán eliminados. Todos los comentarios serán moderados antes de su publicación por lo que su aparición en la web puede verse aplazada un cierto tiempo. Si deseas realizar algún comentario, crítica o sugerencia sobre la propia web puedes hacer a través de la siguiente dirección de correo: webintenta@webintenta.com