Hover variant in Tailwind - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ selector

intermediate

What color will the text be on hover?

Given the following Tailwind CSS class, what color will the text become when the user hovers over the element?

class="text-gray-700 hover:text-blue-500"

A The text color changes to blue (#3b82f6) on hover.

B The text color changes to gray (#374151) on hover.

C The text color stays gray (#374151) on hover.

D The text color changes to red (#ef4444) on hover.

💡 Hint

Look at the part after 'hover:' to see the color applied on hover.

The class 'hover:text-blue-500' changes the text color to blue when the mouse is over the element. The base color is gray-700, but on hover it switches to blue-500.

❓ layout

intermediate

Which element will have a shadow on hover?

Consider these two buttons with Tailwind classes:

<button class="bg-white hover:shadow-lg p-4">Button 1</button>
<button class="bg-white shadow hover:shadow-lg p-4">Button 2</button>

Which button will show a shadow only when hovered?

A Both buttons have shadows only on hover.

B Button 2 will have a shadow only on hover; Button 1 always has a shadow.

C Neither button will have a shadow on hover.

D Button 1 will have a shadow only on hover; Button 2 always has a shadow.

💡 Hint

Check which button has the 'shadow' class without 'hover:' prefix.

Button 1 has no shadow by default but adds 'shadow-lg' on hover. Button 2 has 'shadow' always and adds 'shadow-lg' on hover, so it always shows a shadow.

🧠 Conceptual

advanced

What does the 'hover:' variant do in Tailwind CSS?

Choose the best description of what the 'hover:' variant does in Tailwind CSS classes.

A It applies the styles permanently to the element regardless of user interaction.

B It applies the specified styles only when the user hovers the mouse over the element.

C It applies styles only when the element is focused via keyboard navigation.

D It applies styles only when the element is clicked.

💡 Hint

Think about what 'hover' means in everyday computer use.

The 'hover:' variant in Tailwind applies styles only when the mouse pointer is over the element, i.e., on hover.

📝 Syntax

advanced

Which Tailwind class correctly changes background on hover?

Which option correctly changes the background color to green when hovering over a div?

A class="bg-white hover:bg-green-500"

B class="bg-white bg-hover-green-500"

C class="bg-white hover:green-500"

D class="bg-white hover-bg-green-500"

💡 Hint

Remember the correct syntax uses a colon after 'hover'.

The correct syntax for hover variant in Tailwind is 'hover:' followed by the utility class. Only option A uses this correctly.

❓ accessibility

expert

Why should you not rely only on hover styles for important information?

In terms of accessibility, why is it a bad idea to show important content only on hover using Tailwind's hover variant?

A Because hover styles are not supported by modern browsers.

B Because hover styles slow down page loading times significantly.

C Because keyboard users and touch screen users may not trigger hover, making content inaccessible.

D Because hover styles automatically disable screen readers.

💡 Hint

Think about how people use devices without a mouse.

Hover styles only activate with a mouse pointer. Keyboard-only users and touch screen users cannot trigger hover, so important info shown only on hover is hidden from them.

Practice

1. What does the hover: prefix do in Tailwind CSS?

easy

A. Applies styles only when the mouse is over the element

B. Applies styles permanently to the element

C. Removes styles when the mouse is over the element

D. Applies styles only on mobile devices

Solution

1. Step 1: Understand the hover variant purpose

   The hover: prefix in Tailwind applies styles only when the mouse pointer is over the element.

2. Step 2: Compare options with this behavior

   Only Applies styles only when the mouse is over the element describes applying styles on mouse hover, others describe permanent or unrelated behavior.

3. Final Answer:

   Applies styles only when the mouse is over the element -> Option A

4. Quick Check:

   hover: means on mouse hover [OK]

Hint: Hover prefix means styles activate on mouse hover [OK]

Common Mistakes:

• Thinking hover applies styles permanently
• Confusing hover with focus or active states
• Assuming hover works only on mobile

2. Which of the following is the correct Tailwind syntax to change text color to blue on hover?

easy

A. text-hover-blue-500

B. hover:text-blue-500

C. hover:blue-text-500

D. text-blue-500-hover

Solution

1. Step 1: Recall Tailwind hover syntax

   The correct syntax uses hover: prefix followed by the utility class, e.g., hover:text-blue-500.

2. Step 2: Check each option

   Only hover:text-blue-500 matches the correct pattern. Others have incorrect order or invalid class names.

3. Final Answer:

   hover:text-blue-500 -> Option B

4. Quick Check:

   hover: + utility class = correct syntax [OK]

Hint: hover: always comes before the utility class [OK]

Common Mistakes:

• Placing hover after the utility class
• Mixing words in the class name
• Using invalid Tailwind color names

3. What will happen when you hover over this button?

<button class="bg-gray-300 hover:bg-green-400 text-black p-2 rounded">Click me</button>

medium

A. Button text color changes to green on hover

B. Button background stays gray on hover

C. Button background changes from gray to green on hover

D. Button disappears on hover

Solution

1. Step 1: Analyze the classes

   The button has bg-gray-300 for background normally and hover:bg-green-400 for background on hover.

2. Step 2: Understand hover effect

   When hovered, the background color changes from gray to green. Text color remains black.

3. Final Answer:

   Button background changes from gray to green on hover -> Option C

4. Quick Check:

   hover:bg-green-400 changes background on hover [OK]

Hint: hover:bg- changes background color on hover [OK]

Common Mistakes:

• Thinking text color changes instead of background
• Assuming no change happens on hover
• Confusing hover:bg with hover:text

4. Identify the error in this Tailwind class usage:

<div class="hover:bg-red-500 hovertext-white p-4">Alert</div>

medium

A. Extra space inside class attribute

B. Incorrect color name 'red-500'

C. Using hover on a div is invalid

D. Missing colon in second hover class

Solution

1. Step 1: Check each hover class syntax

   The first class hover:bg-red-500 is correct. The second class hovertext-white is missing a colon after hover.

2. Step 2: Confirm correct syntax

   The correct class should be hover:text-white with a colon separating hover and the utility.

3. Final Answer:

   Missing colon in second hover class -> Option D

4. Quick Check:

   hover: must separate variant and utility [OK]

Hint: hover: must always have a colon before utility [OK]

Common Mistakes:

• Omitting colon after hover
• Using invalid color names
• Thinking hover can't be used on div

5. You want a button that is gray normally, turns blue on hover, and shows white text only on hover. Which class list achieves this?

hard

A. bg-gray-400 hover:bg-blue-600 text-gray-800 hover:text-white p-3 rounded

B. bg-gray-400 bg-hover-blue-600 text-white hover:text-gray-800 p-3 rounded

C. bg-gray-400 hover:bg-blue-600 hover-text-white text-gray-800 p-3 rounded

D. bg-gray-400 hover:bg-blue-600 text-white hover:text-white p-3 rounded

Solution

1. Step 1: Identify normal and hover background colors

   Normal background should be gray (bg-gray-400), hover background blue (hover:bg-blue-600).

2. Step 2: Identify text colors

   Normal text is gray (text-gray-800), hover text is white (hover:text-white).

3. Step 3: Check each option

   bg-gray-400 hover:bg-blue-600 text-gray-800 hover:text-white p-3 rounded matches all requirements with correct syntax. Others have wrong class names or order.

4. Final Answer:

   bg-gray-400 hover:bg-blue-600 text-gray-800 hover:text-white p-3 rounded -> Option A

5. Quick Check:

   hover: prefix changes styles on mouse hover [OK]

Hint: Use hover: before both bg and text classes for hover styles [OK]

Common Mistakes:

• Using incorrect hover syntax like hover-text-white
• Setting text color to white normally instead of on hover
• Mixing up hover:bg and bg-hover