Tailwind CSS Course
Tailwind CSS
/
Beginner

Hover State

Definition

A state variant (`hover:`) that applies a utility class ONLY when the user's mouse cursor is resting over the element.

Explain Like I'm New

When a user mouses over a blue button, you want it to turn dark blue to signal that it is clickable. You simply add `hover:bg-blue-700`.

Real World Example

Applying `hover:underline` to a blue text link so it underlines exactly like a classic 1990s webpage when the user puts their mouse over it.

Common Use Cases

  • •Buttons
  • •Links
  • •Interactive cards

Interactive Example

 Interview Questions
basic
  • What prefix do you use to change the text color to red when the mouse is over an element?
intermediate
  • Does the `hover:` state work on mobile touch screens?
Flash Cards
Question
Prefix?
Click to reveal answer
Answer
`hover:text-red-500`
Question
On mobile?
Click to reveal answer
Answer
Mobile phones do not have a mouse cursor. 'Hovering' technically happens for a split second when the user taps the screen with their finger, but it is generally terrible UX to rely on hover states for critical information on mobile devices.