Hover state in CSS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to change the background color when hovering over the button.

CSS

button:hover {
  background-color: [1];
}

Drag options to blanks, or click blank then click option'

Ablue

Bred

Cnone

Dbold

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'none' as a color value causes no visible change.

Using 'bold' is not a color and will cause an error.

The :hover selector applies styles when the mouse is over the element. Setting background-color to blue changes the button's background on hover.

2fill in blank

medium

Complete the code to change the text color on hover for links.

CSS

a:hover {
  color: [1];
}

Drag options to blanks, or click blank then click option'

Agreen

Bnone

Citalic

Dunderline

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'underline' or 'italic' as color values causes no effect or errors.

Using 'none' does not change the color.

The color property changes the text color. On hover, setting it to green changes the link color.

3fill in blank

hard

Fix the error in the hover selector to apply a border on hover.

CSS

div[1] {
  border: 2px solid black;
}

Drag options to blanks, or click blank then click option'

Ahover

B:hover

C.hover

D#hover

Attempts:

3 left

💡 Hint

Common Mistakes

Omitting the colon causes the selector to fail.

Using class or ID selectors instead of the hover pseudo-class.

The correct CSS pseudo-class for hover is :hover. It must have a colon before the word.

4fill in blank

hard

Fill both blanks to change the font size and add underline on hover for paragraphs.

CSS

p[1] {
  font-size: [2];
  text-decoration: underline;
}

Drag options to blanks, or click blank then click option'

A:hover

B16px

C20px

D:active

Attempts:

3 left

💡 Hint

Common Mistakes

Using ':active' instead of ':hover' changes style on click, not hover.

Choosing too small font size does not show visible change.

Use :hover to apply styles on hover. Setting font-size to 20px changes the text size when hovered.

5fill in blank

hard

Fill all three blanks to change the button's background, text color, and cursor on hover.

CSS

button[1] {
  background-color: [2];
  color: [3];
  cursor: pointer;
}

Drag options to blanks, or click blank then click option'

A:hover

Bwhite

Cblack

Dblue

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up background and text colors reduces readability.

Forgetting ':hover' means styles won't apply on hover.

Use :hover to style the button on hover. Set background-color to blue and color (text color) to white for good contrast.