Bird
Raised Fist0
CSSmarkup~5 mins

Hover state in CSS

Choose your learning style10 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf

Start learning this pattern below

Jump into concepts and practice - no test required

or
Recommended
Test this pattern10 questions across easy, medium, and hard to know if this pattern is strong
Introduction

The hover state lets you change how something looks when you move your mouse over it. It helps users know what they can click or interact with.

To highlight buttons when a user points at them with the mouse.
To show extra information or effects on links when hovered.
To change colors or styles of menu items when the mouse is over them.
To make images or cards react visually when hovered for better engagement.
To improve user experience by giving clear feedback on interactive elements.
Syntax
CSS
selector:hover {
  property: value;
}

The :hover is a CSS pseudo-class that applies styles when the mouse is over the element.

You can use it on buttons, links, images, or any visible element.

Examples
Changes the button's background color to light blue when hovered.
CSS
button:hover {
  background-color: lightblue;
}
Underlines the link and changes its color to red on hover.
CSS
a:hover {
  text-decoration: underline;
  color: red;
}
Adds a shadow around a card element when hovered to make it stand out.
CSS
.card:hover {
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}
Sample Program

This page shows a green button that changes to a darker green when you move your mouse over it. The change is smooth because of the transition.

CSS
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Hover State Example</title>
  <style>
    button {
      background-color: #4CAF50;
      color: white;
      padding: 1rem 2rem;
      border: none;
      border-radius: 0.5rem;
      font-size: 1.25rem;
      cursor: pointer;
      transition: background-color 0.3s ease;
    }
    button:hover {
      background-color: #45a049;
    }
  </style>
</head>
<body>
  <main>
    <button aria-label="Submit form">Submit</button>
  </main>
</body>
</html>
OutputSuccess
Important Notes

Hover effects do not work on touch screens the same way because there is no mouse pointer.

Use transition to make hover changes smooth and pleasant.

Always ensure good color contrast for accessibility when changing colors on hover.

Summary

The :hover pseudo-class changes styles when the mouse is over an element.

It helps users see what is clickable or interactive.

Use smooth transitions and good contrast for better user experience.

Practice

(1/5)
1. What does the CSS :hover pseudo-class do?
easy
A. It applies styles only when the element is focused by keyboard.
B. It hides an element when clicked.
C. It changes the style of an element when the mouse pointer is over it.
D. It permanently changes the style of an element after a click.

Solution

  1. Step 1: Understand the purpose of :hover

    The :hover pseudo-class activates when the mouse pointer is over an element, changing its style temporarily.

  2. Step 2: Compare options with this behavior

    Only the option "It changes the style of an element when the mouse pointer is over it." describes this temporary style change on mouse hover correctly.

  3. Final Answer:

    It changes the style of an element when the mouse pointer is over it. -> Option C

  4. Quick Check:

    :hover changes style on mouse over [OK]
Hint: Hover means mouse is over element, triggering style change [OK]
Common Mistakes:
  • Confusing :hover with :focus or :active
  • Thinking :hover applies after clicking
  • Assuming :hover hides elements
2. Which CSS syntax correctly applies a red background on hover to all button elements?
easy
A. button :hover { background-color: red; }
B. button:hover { background-color: red; }
C. button:hover() { background-color: red; }
D. button:hover[] { background-color: red; }

Solution

  1. Step 1: Identify correct pseudo-class syntax

    The :hover pseudo-class is used without spaces or parentheses after the selector.

  2. Step 2: Check each option

    button:hover { background-color: red; } uses correct syntax: button:hover { ... }. Options A, C, and D have invalid spaces or characters.

  3. Final Answer:

    button:hover { background-color: red; } -> Option B

  4. Quick Check:

    Correct pseudo-class syntax = button:hover { background-color: red; } [OK]
Hint: No spaces before :hover and no parentheses [OK]
Common Mistakes:
  • Adding space between selector and :hover
  • Using parentheses after :hover
  • Using brackets [] with :hover
3. What will be the background color of the <div> when hovered in this CSS?
div { background-color: blue; transition: background-color 0.5s; } div:hover { background-color: green; }
medium
A. Green smoothly over 0.5 seconds on hover
B. Green immediately on hover, no transition
C. Background color changes to red on hover
D. Blue, with no change on hover

Solution

  1. Step 1: Understand the transition property

    The transition: background-color 0.5s; means background color changes smoothly over half a second.

  2. Step 2: Check hover background color

    The div:hover changes background color to green, so on hover it transitions from blue to green smoothly.

  3. Final Answer:

    Green smoothly over 0.5 seconds on hover -> Option A

  4. Quick Check:

    Transition + :hover changes color smoothly [OK]
Hint: Transition makes hover color change smooth, not instant [OK]
Common Mistakes:
  • Ignoring transition effect
  • Expecting no color change
  • Confusing color names
4. Identify the error in this CSS that prevents the hover effect from working:
a:hover { color: red background-color: yellow }
medium
A. Missing semicolon after color: red stops hover from working.
B. Cannot have two a:hover selectors in CSS.
C. Background color cannot be changed on hover.
D. Hover only works on buttons, not links.

Solution

  1. Step 1: Check CSS syntax for each rule

    The rule a:hover { color: red background-color: yellow } is missing a semicolon after red, which is required to separate declarations.

  2. Step 2: Understand CSS parsing behavior

    Without the semicolon between declarations, the browser ignores invalid properties or the entire rule, breaking the hover effect.

  3. Final Answer:

    Missing semicolon after color: red stops hover from working. -> Option A

  4. Quick Check:

    Always end CSS declarations with semicolon [OK]
Hint: Always put semicolon after each CSS property [OK]
Common Mistakes:
  • Thinking multiple :hover selectors cause error
  • Believing background-color can't change on hover
  • Assuming hover only works on buttons
5. You want a button to smoothly change text color to white and background to blue on hover, but only if the button is enabled (not disabled). Which CSS selector correctly targets this?
hard
A. button[enabled]:hover { color: white; background-color: blue; transition: 0.3s; }
B. button:hover :enabled { color: white; background-color: blue; transition: 0.3s; }
C. button:hover[enabled] { color: white; background-color: blue; transition: 0.3s; }
D. button:enabled:hover { color: white; background-color: blue; transition: 0.3s; }

Solution

  1. Step 1: Understand the order of pseudo-classes

    The :enabled pseudo-class filters enabled buttons, and :hover applies when mouse is over the element.

  2. Step 2: Check correct selector syntax

    button:enabled:hover { color: white; background-color: blue; transition: 0.3s; } uses button:enabled:hover, which is valid and applies styles only when button is enabled and hovered.

  3. Step 3: Identify errors in other options

    button:hover :enabled { color: white; background-color: blue; transition: 0.3s; } includes an invalid space after :hover, selecting :enabled descendants of hovered buttons rather than the button itself. Options C and D use invalid attribute selectors for enabled state.

  4. Final Answer:

    button:enabled:hover { color: white; background-color: blue; transition: 0.3s; } -> Option D

  5. Quick Check:

    Use :enabled before :hover for correct targeting [OK]
Hint: Put :enabled before :hover to target enabled hovered buttons [OK]
Common Mistakes:
  • Using attribute selectors instead of :enabled
  • Adding space between :hover and :enabled
  • Forgetting transition for smooth effect