Hover- und Active-Varianten
Verwenden Sie die Präfixe hover:* und active:*, um Farben, Schatten und Transformationen zu ändern, wenn eine Person mit einem Element interagiert.
Hover- und Active-Varianten ist eine kostenlose Tailwind CSS Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Tailwind CSS Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Tailwind CSS Academy-Kurs umfasst insgesamt 4 Lektionen.
Teile dieser Lektion wurden noch nicht übersetzt und werden auf Englisch angezeigt.
Pseudo-State Variants in Tailwind
CSS pseudo-classes like :hover, :active, and :focus let you apply styles only when specific user interactions occur. In Tailwind, you access these by prefixing any utility with the variant name and a colon. For example, hover:bg-blue-600 changes the background color only while the cursor hovers over the element. This eliminates the need for custom CSS rules for the most common interactive states.
<!-- Basic hover state -->
<button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded">
Hover me
</button>hover: Prefix in Practice
The hover: prefix applies styles when the user's cursor is over an element. You can hover-prefix any Tailwind utility: color, shadow, scale, opacity, text decoration, and more. The combination hover:shadow-lg hover:-translate-y-1 creates the popular card lift effect where a card appears to rise off the page as the cursor approaches it.
<!-- Card with multiple hover effects -->
<div class="max-w-xs bg-white rounded-xl p-5 shadow-md hover:shadow-xl hover:-translate-y-1 transition-all duration-300 cursor-pointer border border-gray-100">
<div class="w-10 h-10 bg-indigo-100 rounded-lg flex items-center justify-center mb-3">
<span class="text-indigo-600 font-bold">A</span>
</div>
<h3 class="font-bold text-gray-900">Analytics Card</h3>
<p class="text-sm text-gray-500 mt-1">Hover to see lift effect</p>
</div>Hover for Text Styling
Hover variants work on text properties too. hover:text-blue-600 changes text color on hover, hover:underline adds an underline, and hover:no-underline removes one. Navigation links commonly use text-gray-600 hover:text-gray-900 for a subtle dark-on-hover effect that signals interactivity without an explicit underline style.
<!-- Navigation with hover text effects -->
<nav class="flex gap-6 p-4">
<a href="#" class="text-gray-600 hover:text-gray-900 transition-colors">Home</a>
<a href="#" class="text-gray-600 hover:text-indigo-600 hover:underline transition-colors">Products</a>
<a href="#" class="text-gray-600 hover:text-gray-900 transition-colors">About</a>
<a href="#" class="text-indigo-600 font-medium">Contact</a>
</nav>active: for Pressed States
The active: variant applies styles while the user is actively pressing an element (the moment between mousedown and mouseup). This creates a physical press feedback. Common patterns include active:scale-95 to make a button appear to compress when clicked, or active:bg-blue-700 to make the background slightly darker, giving tactile feedback similar to pressing a physical button.
<!-- Button with press animation using active: -->
<div class="flex gap-4">
<!-- Scale-down on press -->
<button class="bg-blue-500 hover:bg-blue-600 active:scale-95 active:bg-blue-700 text-white px-6 py-3 rounded-lg font-medium transition-all">
Click Me
</button>
<!-- Darken on press -->
<button class="bg-emerald-500 hover:bg-emerald-600 active:bg-emerald-800 text-white px-6 py-3 rounded-lg font-medium transition-colors">
Buy Now
</button>
</div>Combining hover: and active: Together
The full button interaction sequence is: default → hover → active → default. Each state should provide distinct but harmonious visual feedback. A typical pattern is bg-blue-500 hover:bg-blue-600 active:bg-blue-700 — progressively darker shades that simulate physical depth. This three-state progression is the foundation of every accessible button in a well-designed UI.
<!-- Full button state progression -->
<div class="flex gap-4 flex-wrap">
<!-- Primary button: full state progression -->
<button class="bg-blue-500 hover:bg-blue-600 active:bg-blue-700 text-white px-5 py-2.5 rounded-lg font-medium transition-colors active:scale-95">
Primary
</button>
<!-- Danger button: full state progression -->
<button class="bg-red-500 hover:bg-red-600 active:bg-red-700 text-white px-5 py-2.5 rounded-lg font-medium transition-colors active:scale-95">
Delete
</button>
<!-- Ghost button: hover adds background -->
<button class="text-gray-700 hover:bg-gray-100 active:bg-gray-200 px-5 py-2.5 rounded-lg font-medium transition-colors">
Ghost
</button>
</div>hover: on Non-Button Elements
The hover: variant works on any HTML element, not just buttons. Table rows with hover:bg-gray-50, list items with hover:bg-blue-50, and grid cards with hover:border-blue-500 all benefit from hover states. Adding cursor-pointer alongside the hover style signals to users that the element is clickable even when it is not a native button or link.
<!-- Hoverable table rows -->
<table class="w-full">
<thead>
<tr class="bg-gray-50 text-left">
<th class="p-3 font-semibold">Name</th>
<th class="p-3 font-semibold">Status</th>
<th class="p-3 font-semibold">Score</th>
</tr>
</thead>
<tbody class="divide-y">
<tr class="hover:bg-blue-50 cursor-pointer transition-colors">
<td class="p-3">Alice</td>
<td class="p-3 text-green-600">Active</td>
<td class="p-3">98</td>
</tr>
<tr class="hover:bg-blue-50 cursor-pointer transition-colors">
<td class="p-3">Bob</td>
<td class="p-3 text-yellow-600">Pending</td>
<td class="p-3">74</td>
</tr>
</tbody>
</table>hover: With Transform Utilities
Transform utilities paired with hover: create motion effects without JavaScript. hover:scale-105 zooms in slightly, hover:-translate-y-2 lifts up, and hover:rotate-3 tilts. These micro-interactions make interfaces feel alive and responsive. Always pair transforms with transition-transform duration-200 for smooth animation instead of jarring instant changes.
<!-- Interactive feature icons with transform hover -->
<div class="grid grid-cols-3 gap-6 p-8">
<div class="text-center cursor-pointer group">
<div class="w-16 h-16 bg-blue-100 rounded-2xl flex items-center justify-center mx-auto mb-2 hover:scale-110 hover:bg-blue-200 transition-all duration-200">
<span class="text-2xl">🚀</span>
</div>
<span class="text-sm font-medium">Launch</span>
</div>
<div class="text-center cursor-pointer">
<div class="w-16 h-16 bg-green-100 rounded-2xl flex items-center justify-center mx-auto mb-2 hover:-translate-y-1 hover:shadow-md transition-all duration-200">
<span class="text-2xl">🌱</span>
</div>
<span class="text-sm font-medium">Grow</span>
</div>
<div class="text-center cursor-pointer">
<div class="w-16 h-16 bg-purple-100 rounded-2xl flex items-center justify-center mx-auto mb-2 hover:rotate-6 transition-transform duration-200">
<span class="text-2xl">⚡</span>
</div>
<span class="text-sm font-medium">Boost</span>
</div>
</div>hover: for Link Underline Effects
A polished hover underline effect requires the underline to expand from center or slide in from left. Using relative positioning and a pseudo-element approach with Tailwind's after: variant: set a zero-width bottom border by default and expand it to full width on hover. This creates an animated underline that feels more intentional than the browser's default text-decoration: underline.
<!-- Animated underline link effect -->
<a
href="#"
class="relative text-gray-700 font-medium after:absolute after:bottom-0 after:left-0 after:h-0.5 after:w-0 after:bg-blue-500 hover:after:w-full after:transition-all after:duration-300"
>
Hover for animated underline
</a>active: for Form Submission Feedback
Form submission buttons especially benefit from active: states. When a user clicks Submit, the active state gives immediate visual confirmation that the click registered, even if the server response takes a moment. Combining active:bg-green-700 with active:scale-95 creates a satisfying press sensation that communicates the action was received.
<!-- Submit form button with clear active state -->
<form class="max-w-sm space-y-4 p-6">
<div>
<label class="block text-sm font-medium mb-1">Email</label>
<input type="email" class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="you@example.com" />
</div>
<button
type="submit"
class="w-full bg-blue-600 hover:bg-blue-700 active:bg-blue-800 active:scale-[0.99] text-white py-3 rounded-lg font-semibold transition-all"
>
Subscribe to Newsletter
</button>
</form>hover: and Responsive Variants
Hover and active variants compose with responsive breakpoints. The syntax stacks from left to right: sm:hover:bg-blue-600 means 'on small screens and above, turn blue on hover.' On touch devices, hover states fire once on tap and persist until another element is tapped — something to be aware of when designing hover effects. Use responsive prefixes to disable hover visual changes on mobile if they cause usability issues.
<!-- Hover effects only on desktop (md+) -->
<div class="grid grid-cols-2 gap-4">
<div class="bg-white border rounded-xl p-4 md:hover:shadow-xl md:hover:-translate-y-1 transition-all duration-300">
<h3 class="font-bold">Feature A</h3>
<p class="text-sm text-gray-500">Lift on hover (desktop only)</p>
</div>
<div class="bg-white border rounded-xl p-4 md:hover:shadow-xl md:hover:-translate-y-1 transition-all duration-300">
<h3 class="font-bold">Feature B</h3>
<p class="text-sm text-gray-500">Lift on hover (desktop only)</p>
</div>
</div>Building a Complete Button Component
Here is a complete, production-ready button with all interactive states: default, hover, active, focus-visible, and disabled. This pattern handles every scenario a user might encounter, providing clear visual feedback at each stage. Copy this pattern into your projects as the foundation for a consistent button component.
<!-- Complete button with all states -->
<div class="flex gap-4 flex-wrap">
<!-- Primary button: all states -->
<button
class="bg-blue-600 hover:bg-blue-700 active:bg-blue-800 active:scale-95 text-white px-6 py-2.5 rounded-lg font-medium transition-all focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none"
>
Active Button
</button>
<!-- Disabled state -->
<button
disabled
class="bg-blue-600 hover:bg-blue-700 active:bg-blue-800 active:scale-95 text-white px-6 py-2.5 rounded-lg font-medium transition-all focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none"
>
Disabled Button
</button>
</div>Quick Check
Test your understanding of Tailwind CSS Mastery concepts from this lesson.
Lesson Recap
In this lesson you learned: hover: applies styles when the cursor is over an element, active: applies during the press between mousedown and mouseup for physical feedback, and combining hover:bg-* and active:bg-* with progressively darker shades creates the standard button interaction sequence. Next up we explore focus and focus-visible variants for keyboard accessibility.
Häufig gestellte Fragen
Ist die Lektion „Hover- und Active-Varianten“ kostenlos?
Ja — der vollständige Text von „Hover- und Active-Varianten“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Tailwind CSS Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Tailwind CSS Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Hover- und Active-Varianten“?
Verwenden Sie die Präfixe hover:* und active:*, um Farben, Schatten und Transformationen zu ändern, wenn eine Person mit einem Element interagiert. Du übst Tailwind CSS Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Tailwind CSS Academy zu starten?
Keine Vorkenntnisse erforderlich. Tailwind CSS Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 4.
Wie lange dauert die Lektion „Hover- und Active-Varianten“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Tailwind CSS Academy-Lektion Code schreiben und ausführen?
Ja. Jede Tailwind CSS Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Hover- und Active-Varianten
- Focus- und Focus-Visible-Varianten
- Disabled- und Placeholder-Varianten
- Group- und Peer-Varianten