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.