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.