FSM Full Stack Masterclass
Platform under construction
CSS course badge

Animation & Interaction

Advanced

Hover & Focus

Hover and focus states are interaction feedback. Hover helps pointer users; focus shows keyboard users where they are.

.link:hover { color: var(--green); }
.link:focus-visible { outline: 3px solid var(--focus); }

Motion mental model

Hover is optional polish; focus is required orientation.

Hover appears when a pointer rests over an element. Focus appears when an element becomes the active target for keyboard, script or pointer interaction.

A professional interface treats focus as seriously as hover. Keyboard users need to see where they are before activating anything.

Do not hide essential controls behind hover only. Touch devices may not have hover, and keyboard users may never trigger it.

Hover

Pointer feedback for mouse and trackpad users.

Focus

The active element in the interaction flow.

Focus-visible

A smarter focus style that usually appears for keyboard navigation.

Active

The pressed state during activation.

Visual model

See the interaction sequence before writing the motion.

Rest

Default

The component is idle but understandable.

Hover

Pointer hint

The component invites a click.

Focus

Keyboard position

The component is clearly selected.

Active

Pressed

The component responds to activation.

Good CSS versus fragile CSS

Hover and focus both covered

.link:hover { color: var(--green); }

.link:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 4px;
}

Mouse-only feedback

.link { outline: none; }
.link:hover .hidden-action { display: block; }

Rules of thumb

Motion should guide attention, confirm state and stay out of the way.

Never remove focus without replacement

outline: none is a bug unless a better focus style exists.

Do not depend on hover only

Important content and controls must be available without hover.

Use focus-visible for polish

It gives keyboard users focus indication without over-showing rings on mouse clicks.

Keep hover subtle

Hover should invite interaction, not change the entire layout.

Style active separately

Pressed feedback makes buttons feel physical and responsive.

Test with Tab

Keyboard testing is the quickest way to catch broken interaction states.

Production thinking

Good animation is fast, purposeful, accessible and testable.

Why does this matter?

Hover and focus states are how users know the page is listening. Without them, an interface feels static and uncertain.

Accessibility

Visible focus is a core accessibility requirement. Hover-only disclosure is fragile for keyboard and touch users.

Production note

Build a state checklist: default, hover, focus-visible, active, disabled, selected and error where relevant.

SEO note

Interaction states do not directly rank, but inaccessible navigation can block users and crawlers from discovering content cleanly.

Live code lab

Change the CSS and watch the interface respond.

The preview runs in an isolated iframe. Links and forms stay inside the practice area, so you can experiment without leaving the lesson.

Mini assignment

Try this now.

  • Remove focus-visible and explain what keyboard users lose.
  • Make hover change font-size and notice why layout movement is bad.
  • Add an active state that feels like a small physical press.

Practice assignment

Do this before moving to the next lesson.

  1. Create three links or buttons.
  2. Add separate hover, focus-visible and active styles.
  3. Test mentally with Tab before using the mouse.

Try it yourself

Build keyboard-safe interactive links

Live preview

Self-check

Before you continue, prove that you understand Hover & Focus.

Advanced

Answer these questions before moving on. If the motion has no purpose, no fallback or no state clarity, it is not production motion yet.

  1. Can you explain hover versus focus?
  2. Can you use :focus-visible correctly?
  3. Can you avoid hover-only content?
  4. Can you preserve keyboard orientation?
  5. Can you make active feedback subtle?

Senior audit upgrade

Hover-only interfaces fail on touch.

Hover can polish a pointer interface, but it cannot be the only way to reveal important information or actions.

@media (hover: hover)

Use hover media queries for hover-specific effects.

Focus parity

Anything hover reveals should usually also be available on focus.

Touch alternative

Mobile users need visible controls or tap behavior.