Hover variant in Tailwind - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to change the background color on hover using Tailwind CSS.

Tailwind

<button class="bg-blue-500 [1]:bg-blue-700 text-white font-bold py-2 px-4 rounded">Hover me</button>

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

Aactive

Bhover

Cfocus

Dvisited

Attempts:

3 left

💡 Hint

Common Mistakes

Using focus instead of hover

Forgetting the colon after the variant

Using active which applies on click, not hover

The hover variant applies styles when the mouse pointer is over the element.

2fill in blank

medium

Complete the code to change the text color on hover using Tailwind CSS.

Tailwind

<p class="text-gray-700 [1]:text-red-500">Hover over this text</p>

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

Ahover

Bfocus

Cactive

Dvisited

Attempts:

3 left

💡 Hint

Common Mistakes

Using focus instead of hover

Using active which applies on click

Missing the colon after the variant

The hover variant changes the text color when the mouse is over the text.

3fill in blank

hard

Fix the error in the code to apply a hover effect that changes the border color.

Tailwind

<div class="border-2 border-gray-300 [1]border-blue-500 p-4">Hover me</div>

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

Ahover:

Bhover

C:hover

Dhover-

Attempts:

3 left

💡 Hint

Common Mistakes

Omitting the colon after hover

Using pseudo-class syntax like ':hover' which is invalid in Tailwind

Using hyphen instead of colon

The correct syntax for hover variant in Tailwind is hover: with a colon.

4fill in blank

hard

Fill both blanks to create a button that changes background and text color on hover.

Tailwind

<button class="bg-green-400 [1]:bg-green-600 text-white [2]:text-yellow-300 font-semibold py-2 px-6 rounded">Hover me</button>

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

Ahover

Bfocus

Dactive

Attempts:

3 left

💡 Hint

Common Mistakes

Using different variants for background and text color

Forgetting the colon after hover

Using focus or active instead of hover

Both background and text color change on hover, so both blanks use the hover variant.

5fill in blank

hard

Fill all three blanks to create a link that changes color, underline, and font weight on hover.

Tailwind

<a href="#" class="text-blue-600 [1]:text-blue-800 [2]:underline [3]:font-bold">Hover over me</a>

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

Ahover

Bfocus

Attempts:

3 left

💡 Hint

Common Mistakes

Using different variants for each style

Missing colon after hover

Using focus or active instead of hover

All three styles apply on hover, so all blanks use the hover variant.