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. <div id="Efecto_Hover">
2. <ul>
3. <li>
4. <a href="#">Cabecera numero uno
5. <span class="descripcion">
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. </span>
8. <span class="categoria">CSS</span></a>
9. </li>
10. <li>
11. <a href="#">Cabecera numero dos
12. <span class="descripcion">
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. </span>
15. <span class="categoria">Photoshop</span></a>
16. </li>
17. <li>
18. <a href="#">Cabecera numero tres
19. <span class="descripcion">
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. </span>
22. <span class="categoria">Recursos</span></a>
23. </li>
24. </ul>
25. </div>
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. }
Autor: Web Intenta
http://www.webintenta.com/category/CSS/page/2/#
Usuarios que han visto este tema también han visto...
- Controlar el desbordamiento en una etiqueta con CSS
- Menú rollover en CSS sin JavaScript
- Efectos sobre elementos Input
- Reglas espReglas especiales CSS para Internet explorer 7
- Texto iluminado con CSS
- Versión imprimible de este documento
- Enviar por e-mail este documento
