touch_app
Interactividad en tablas
mouse
:hover
Estado al pasar cursor
tr:hover, td:hover
animation
transition
Suavizado de cambios
all 0.3s ease
transform
transform
Transformaciones visuales
scale(1.02), translateY(-2px)
shadow
box-shadow
Efectos de sombra
0 4px 8px rgba(0,0,0,0.1)
tr {
transition: all 0.3s ease;
}
tr:hover {
background-color: rgba(87,108,188,0.2);
transform: scale(1.02);
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
td:hover {
background-color: rgba(87,108,188,0.3);
font-weight: 600;
cursor: pointer;
}
transition: all 0.3s ease;
}
tr:hover {
background-color: rgba(87,108,188,0.2);
transform: scale(1.02);
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
td:hover {
background-color: rgba(87,108,188,0.3);
font-weight: 600;
cursor: pointer;
}
visibility
Efectos en filas y celdas
| Producto | Precio | Stock |
|---|---|---|
| Laptop | $999 | 15 |
| Monitor | $299 | 23 |
| Teclado | $79 | 42 |
visibility
Efectos alternativos
| Producto | Precio | Stock |
|---|---|---|
| Laptop | $999 | 15 |
| Monitor | $299 | 23 |
| Teclado | $79 | 42 |
lightbulb
Buenas prácticas
• Transiciones suaves para mejor experiencia
• Feedback visual claro al interactuar
• Evitar sobrecarga de efectos en tablas grandes
• Feedback visual claro al interactuar
• Evitar sobrecarga de efectos en tablas grandes