Hover row
Learn row hover effect with :hover.
What is a hover row?
A hover row changes the background of the row under the cursor. In CSS you use the tr:hover selector. Example: tr:hover { background: #e0e7ff; }.
This effect makes it clear which row the user is looking at, especially in wide tables. As the eye moves over the rows, it does not lose the data being tracked. The color should not be too dark; reading gets harder.
Add a transition to hover
To make the hover effect smooth, you use the transition property. First add a transition to tr, then change the background in tr:hover.
Example: tr { transition: background 0.2s; } and tr:hover { background: #e0e7ff; }. The color shifts over 0.2 seconds instead of jumping; this small touch makes the table feel more polished.
Exercise Add a hover row to a stock list
For a table with class .stok, add a hover row: write background: #e0e7ff; on the .stok tr:hover selector. Also add transition: background 0.2s; on the .stok tr selector.
Show example solution
open a .stok tr selector and write transition: background 0.2s; inside. Then open a .stok tr:hover selector and write background: #e0e7ff; inside.
Example solution:
.stok tr {
transition: background 0.2s;
}
.stok tr:hover {
background: #e0e7ff;
}Test yourself
-
Which selector targets the row under the cursor?
/* the ? selector colors the row under the cursor */- tr:hover
- tr:active
- tr:hovered
- tr:focus
Show answer
tr:hover — Correct! tr:hover targets the row under the cursor.
-
Hover selector
____ { background: #e0e7ff; }Show answer
tr:hover { background: #e0e7ff; } -
Match the hover concepts
- tr:hover
- on cursor hover
- tr:nth-child(even)
- even rows
- transition
- smooth change
- background
- row color