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

Next lesson: Summary - Data table

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies