悬停与激活变体
使用 hover:* 和 active:* 前缀，在用户与元素交互时改变颜色、阴影和变换效果。
悬停与激活变体 是 CoddyKit 上的免费 Tailwind CSS Academy 课时。 这是第 1 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Tailwind CSS Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Tailwind CSS Academy 课程共包含 4 节课。
本课时的部分内容尚未翻译，以英文显示。
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.
常见问题解答
「悬停与激活变体」课时是免费的吗？
是的 — 「悬停与激活变体」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Tailwind CSS Academy 课程的其余内容，请升级到 CoddyKit PRO。 Tailwind CSS Academy 课程共包含 4 节课。
「悬停与激活变体」这节课中我会学到什么？
使用 hover:* 和 active:* 前缀，在用户与元素交互时改变颜色、阴影和变换效果。 你通过在浏览器中直接运行的动手代码来练习 Tailwind CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 Tailwind CSS Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 Tailwind CSS Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 1 节课，共 4 节。
「悬停与激活变体」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 Tailwind CSS Academy 课中编写并运行代码吗？
能。每节 Tailwind CSS Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。