CSS basics · Lesson 10 of 12 · 7 minutes

CSS basics: Hover states

Hover is one interaction state, not the only indication that a control can be used.

Open the lab Course map

Mastery 0/3Run itExplain itApply it

Current edit

PreviewNo external resources

Your objectives

Hints are always available. Wrong turns never cost XP.

1
Build hover states
Build this first target: button with background-color: #164e45, color: #ffffff. Keep the selector relationships intact and inspect the preview.
Hint & worked example
Hover is one interaction state, not the only indication that a control can be used.
The requested selectors and declarations exist outside comments.
```
button { background-color: #164e45; color: #ffffff; }
```
Common mistake to avoid: If the page fits one desktop viewport, no narrower viewport needs checking.
2
Extend the hover states example
Extend your file to include: button with background-color: #164e45, color: #ffffff; button:hover with background-color: #103b35. Keep the selector relationships intact and inspect the preview.
Hint & worked example
Hover is one interaction state, not the only indication that a control can be used.
The requested selectors and declarations exist outside comments.
```
button { background-color: #164e45; color: #ffffff; }
button:hover { background-color: #103b35; }
```
Common mistake to avoid: Hiding all overflow always makes content accessible.
3
Verify the complete hover states pattern
Finish the pattern with: button with background-color: #164e45, color: #ffffff; button:hover with background-color: #103b35; button with cursor: pointer. Keep the selector relationships intact and inspect the preview.
Hint & worked example
Hover is one interaction state, not the only indication that a control can be used.
The requested selectors and declarations exist outside comments.
```
button { background-color: #164e45; color: #ffffff; }
button:hover { background-color: #103b35; }
button { cursor: pointer; }
```
Common mistake to avoid: If the page fits one desktop viewport, no narrower viewport needs checking.

Understand the pattern

Hover is one interaction state, not the only indication that a control can be used.

Misconceptions to reject

If the page fits one desktop viewport, no narrower viewport needs checking.
Hiding all overflow always makes content accessible.

The preview is a sanitized subset, not a full browser compatibility test.

Worked example and expected result

button { background-color: #164e45; color: #ffffff; }
button:hover { background-color: #103b35; }
button { cursor: pointer; }

Hover is one interaction state, not the only indication that a control can be used.

Try a variation

Adapt the final example to a different project name while retaining its structure and relationships. A different context still needs a real browser and accessibility check.

Explain it

Which statement correctly explains hover states?Hiding all overflow always makes content accessible.Hover is one interaction state, not the only indication that a control can be used.If the page fits one desktop viewport, no narrower viewport needs checking.

Apply it elsewhere

You reuse hover states in a different project. What must still be verified?The resulting layout, focus behavior, and readability at the target viewport sizes.Nothing; passing a single exercise guarantees every future use.Only whether the source code has the same number of lines.

Keep the momentum.

Complete the lab, then explain and apply the pattern.

Next: CSS basics: Focus-visible states Try an incident drill

Anonymous lesson and mastery progress lasts for this session. Sign in to keep synced lesson XP between sessions; mastery stays device-local. No speed bonus, lost lives, or hint penalties.

Keep learning

MDN: CSS styling