Hover state in CSS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the CSS <code>:hover</code> pseudo-class used for?

The <code>:hover</code> pseudo-class applies styles to an element when the mouse pointer is over it, creating interactive effects.

beginner

How do you change the background color of a button when a user hovers over it?

Use CSS like button:hover { background-color: blue; } to change the button's background color on hover.

intermediate

Can the :hover state be used on touch devices?

No, :hover works with mouse pointers and is not reliable on touch devices, which use taps instead.

intermediate

Why should you use transitions with :hover effects?

Transitions make hover changes smooth and visually pleasing by animating the style changes over time.

beginner

Write a CSS snippet to make a link text color change to red on hover with a smooth transition.

 a { color: black; transition: color 0.3s ease; } a:hover { color: red; } 

What does the CSS selector button:hover target?

A All buttons on the page

B A button when it is clicked

C A button when the mouse is over it

D A button when it is disabled

The :hover pseudo-class applies styles when the mouse pointer is over the element.

Which CSS property is commonly used with :hover to make changes smooth?

A animation

B transform

C display

D transition

transition animates property changes smoothly on hover.

Can :hover styles be triggered on a smartphone by touching the screen?

A Sometimes, depending on the device

B Yes, always

C No, never

D Only if the device has a mouse

Touch devices usually do not support hover, but some simulate it on first tap.

Which of these is a valid CSS rule to change text color on hover?

A p:hover { color: green; }

B p:click { color: green; }

C p:hovered { color: green; }

D p:hovering { color: green; }

:hover is the correct pseudo-class for mouse hover.

What happens if you do not use transition with :hover?

A The page reloads

B The style changes instantly without animation

C The element disappears

D The hover effect will not work

Without transition, style changes happen immediately without smooth animation.

Explain how the CSS :hover pseudo-class works and give an example of how to use it.

Think about what happens when you move your mouse over an element.

Describe why adding a transition to hover effects improves user experience.

Consider how sudden changes feel compared to smooth ones.

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