Tailwind CSS Academy · บทเรียน

รูปแบบเมื่อชี้และเมื่อใช้งาน

ใช้คำนำหน้า hover:* และ active:* เพื่อเปลี่ยนสี เงา และการแปลงรูปแบบเมื่อผู้ใช้โต้ตอบกับองค์ประกอบ

รูปแบบเมื่อชี้และเมื่อใช้งาน เป็นบทเรียน Tailwind CSS Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน 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 ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Tailwind CSS Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Tailwind CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “รูปแบบเมื่อชี้และเมื่อใช้งาน”

ใช้คำนำหน้า hover:* และ active:* เพื่อเปลี่ยนสี เงา และการแปลงรูปแบบเมื่อผู้ใช้โต้ตอบกับองค์ประกอบ คุณปฏิบัติ Tailwind CSS Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Tailwind CSS Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Tailwind CSS Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน

บทเรียน “รูปแบบเมื่อชี้และเมื่อใช้งาน” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Tailwind CSS Academy นี้ได้ไหม

ได้ บทเรียน Tailwind CSS Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ Tailwind CSS Academy