Tailwind CSS Academy · 강의

Hover 및 활성 상태 변형

hover:*와 active:* 접두사를 사용해 사용자가 요소와 상호작용할 때 색상, 그림자, 변형을 변경합니다.

Hover 및 활성 상태 변형은(는) CoddyKit의 무료 Tailwind CSS Academy 강의입니다. 이것은 4개 중 1번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 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.

자주 묻는 질문

“Hover 및 활성 상태 변형” 강의는 무료인가요?

네 — “Hover 및 활성 상태 변형” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Tailwind CSS Academy 강의 전체를 잠금 해제할 수 있습니다. Tailwind CSS Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“Hover 및 활성 상태 변형”에서 뭘 배우나요?

hover:*와 active:* 접두사를 사용해 사용자가 요소와 상호작용할 때 색상, 그림자, 변형을 변경합니다. 브라우저에서 직접 실행하는 실습 코드로 Tailwind CSS Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

Tailwind CSS Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 Tailwind CSS Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 1번째 강의입니다.

“Hover 및 활성 상태 변형” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 Tailwind CSS Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 Tailwind CSS Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← Tailwind CSS Academy(으)로 돌아가기