Table Fade Effect
Focus on the data that matters. This effect dims the opacity of the entire table when hovered, but keeps the specific row under the mouse fully visible and highlighted.
| # | Product | Price | Stock |
|---|---|---|---|
| 1 | Laptop Pro | $1200 | In Stock |
| 2 | Smartphone X | $800 | Low Stock |
| 3 | Tablet Mini | $400 | Out of Stock |
| 4 | Wireless Buds | $150 | In Stock |
| 5 | Smart Watch | $250 | In Stock |
Hover over the rows above.
Copy the Script
<style>
/* Dim all rows when table body is hovered */
.hover-table tbody:hover tr {
opacity: 0.4;
}
/* Restore opacity for the specific row being hovered */
.hover-table tbody tr:hover {
opacity: 1;
background-color: #f8f9fa;
font-weight: bold;
}
/* Smooth transition */
.hover-table tbody tr {
transition: opacity 0.3s;
}
</style>
<table class="hover-table">
...
</table>Frequently Asked Questions
It can be, but the most efficient way is using CSS `:hover` selectors. This creates a smoother 60fps animation without using JavaScript resources.
Highlighting columns on hover is complex in CSS alone. You usually need JavaScript to find the index of the cell and apply a class to all cells with that index.
Yes. You just need to adjust the opacity levels. Instead of fading to `0.5`, you might change the background color brightness.