Hover state in CSS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ selector

intermediate

Identify the correct CSS selector for hover

Which CSS selector correctly changes the background color of a button when you hover over it?

CSS

button {
  background-color: lightblue;
}

/* Which selector below changes background on hover? */

A button:hover { background-color: darkblue; }

B button:focus { background-color: darkblue; }

C button.active { background-color: darkblue; }

D button::hover { background-color: darkblue; }

💡 Hint

Hover means when the mouse pointer is over the element.

The :hover pseudo-class applies styles when the mouse is over the element. :focus applies when the element is focused by keyboard or mouse. .active is a class, not a state. ::hover is invalid syntax.

❓ rendering

intermediate

What color does the button show on hover?

Given this CSS, what background color will the button have when hovered?

CSS

button {
  background-color: #f0f0f0;
  color: black;
}
button:hover {
  background-color: #ff6347;
  color: white;
}

A Background: black, Text: white

B Background: #ff6347 (tomato red), Text: white

C Background: white, Text: black

D Background: #f0f0f0 (light gray), Text: black

💡 Hint

Hover styles override normal styles when mouse is over the button.

The :hover style changes background to #ff6347 and text color to white only when hovered. Otherwise, normal styles apply.

❓ layout

advanced

Why does the hover effect trigger on child elements?

Consider this HTML and CSS: HTML:

Text inside card

CSS: .card:hover { background-color: yellow; } Why does hovering over the

text inside the card change the card's background color?

A Because the hover state applies when hovering over the .card element or its children.

B Because the CSS selector .card:hover is invalid and does not work.

C Because the <p> element is outside the .card element in the DOM.

D Because the <p> element blocks pointer events, so hover on .card is not detected.

💡 Hint

Hover applies when mouse is over the element or its visible area.

The :hover pseudo-class applies when the mouse is over the element or any of its children. Hovering over

inside .card triggers .card:hover because the child is within the parent's area. A is wrong (children do not block by default), C is false, D selector is valid.

❓ accessibility

advanced

How to make hover effects accessible for keyboard users?

Which CSS approach ensures that keyboard users see the same style changes as mouse users when focusing on a button?

CSS

button {
  background-color: lightgray;
}
button:hover {
  background-color: blue;
  color: white;
}

A Add button:visited styles matching button:hover styles.

B Add button:active styles matching button:hover styles.

C Add button:focus styles matching button:hover styles.

D Add button:hover styles with !important to override focus.

💡 Hint

Keyboard users navigate using focus, not hover.

Keyboard users see focus styles, so matching :focus styles to :hover ensures accessibility. :active is for pressed state, :visited is for links, and !important does not solve accessibility.

🧠 Conceptual

expert

What happens if you use :hover on a touch device?

On a smartphone or tablet (touch device), what is the typical behavior of CSS :hover styles?

A Hover styles apply automatically when the page loads.

B Hover styles never apply because there is no mouse pointer.

C Hover styles apply only when the user long-presses the element.

D Hover styles apply when the user taps the element, acting like a toggle.

💡 Hint

Touch devices do not have a mouse pointer but simulate hover in some ways.

On touch devices, tapping an element can trigger :hover styles as a toggle until another tap happens. This helps simulate hover effects without a mouse.

Practice

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