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:
1.
2.
3.
4. Cabecera numero uno
5.
6. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque nonummy, lorem eget scelerisque ullamcorper, pede lacus bibendum sapien, non pellentesque erat elit vitae lorem.
7.
8. CSS
9.
10.
11. Cabecera numero dos
12.
13. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque nonummy, lorem eget scelerisque ullamcorper, pede lacus bibendum sapien, non pellentesque erat elit vitae lorem.
14.
15. Photoshop
16.
17.
18. Cabecera numero tres
19.
20. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque nonummy, lorem eget scelerisque ullamcorper, pede lacus bibendum sapien, non pellentesque erat elit vitae lorem.
21.
22. Recursos
23.
24.
25.
CSS
1. #Efecto_Hover ul {
2. list-style-type: none;
3. width: 350px;
4. margin:0px;
5. padding:0px;
6. }
7.
8. #Efecto_Hover li {
9. border: 1px solid #999;
10. border-width: 1px 0;
11. margin: 5px 0px;
12. }
13.
14. #Efecto_Hover li a {
15. color: #666;
16. display: block;
17. font: bold 16px Arial, Helvetica, sans-serif;
18. padding: 2px;
19. text-decoration: none;
20. }
21.
22. * html #Efecto_Hover li a {
23. width: 350px;
24. }
25.
26. #Efecto_Hover li a:hover {
27. background: #E2E2E2;
28. }
29.
30. #Efecto_Hover a .descripcion {
31. color: #333;
32. display: block;
33. font: normal 10px Verdana, Helvetica, sans-serif;
34. ine-height: 125%;
35. }
36.
37. #Efecto_Hover a .categoria {
38. color: #409209;
39. font: normal 9px Verdana, Helvetica, sans-serif;
40. line-height: 150%;
41. }
