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.