State class generation (hover, active, disabled) in SASS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a hover state style for a button.

SASS

.button[1] {
  background-color: blue;
}

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

A:hover

B:active

C:disabled

D.hover

Attempts:

3 left

💡 Hint

Common Mistakes

Using '.hover' instead of ':hover'.

Confusing ':hover' with ':active' or ':disabled'.

The :hover pseudo-class applies styles when the user points to the element with a mouse.

2fill in blank

medium

Complete the code to define an active state style for a button.

SASS

.button[1] {
  background-color: red;
}

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

A:active

B:hover

C:disabled

D.active

Attempts:

3 left

💡 Hint

Common Mistakes

Using '.active' class instead of ':active' pseudo-class.

Confusing ':active' with ':hover' or ':disabled'.

The :active pseudo-class applies styles when the element is being clicked or activated.

3fill in blank

hard

Fix the error in the code to style a disabled button state.

SASS

.button[1] {
  background-color: gray;
  cursor: not-allowed;
}

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

A:hover

B:active

C:disabled

D.disabled

Attempts:

3 left

💡 Hint

Common Mistakes

Using '.disabled' class instead of ':disabled' pseudo-class.

Confusing ':disabled' with ':active' or ':hover'.

The :disabled pseudo-class styles elements that are disabled and not interactive.

4fill in blank

hard

Fill both blanks to create hover and active state styles for a button.

SASS

.button[1] {
  background-color: lightblue;
}
.button[2] {
  background-color: darkblue;
}

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

A:hover

B:active

C:disabled

D.active

Attempts:

3 left

💡 Hint

Common Mistakes

Using '.active' class instead of ':active' pseudo-class.

Mixing up the order of hover and active.

The first blank uses :hover for mouse-over style, and the second uses :active for pressed style.

5fill in blank

hard

Fill all three blanks to create hover, active, and disabled state styles for a button.

SASS

.button[1] {
  background-color: lightgreen;
}
.button[2] {
  background-color: green;
}
.button[3] {
  background-color: gray;
  cursor: not-allowed;
}

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

A:hover

B:active

C:disabled

D.disabled

Attempts:

3 left

💡 Hint

Common Mistakes

Using '.disabled' class instead of ':disabled' pseudo-class.

Mixing up the order of the states.

The blanks represent the hover, active, and disabled pseudo-classes respectively, styling the button for each state.