Tailwind CSS • المستوى الثالث • الدرس 2

حالات التفاعل والانتقالات (Hover, Focus & Transitions)

أهداف الدرس

استخدام البادئات التفاعلية hover:، focus:، و active:.
إنعام الحركة الناعمة باستخدام transition-all مع تحديد المدة duration-300.
تحويل العناصر بـ scale-105 و -translate-y-1 مع دمج الانتقالات.
التحكم في العناصر الأبناء بـ group-hover: عند تفاعل الأب.

1. جعل العناصر حية وتفاعلية

تمنح التفاعلات المستخدم شعوراً بالاستجابة المباشرة، حيث تتغير الألوان أو الأحجام بسلاسة عند تحريك المؤشر أو النقر.

html

<!-- الأزرار التفاعلية -->
<button class="bg-sky-500 hover:bg-sky-600 active:scale-95
               transition-all duration-300">
  اضغط
</button>

<!-- حالات Focus -->
<input class="focus:ring-2 focus:ring-indigo-500 focus:outline-none" />

<!-- تأثيرات Transform -->
<div class="hover:scale-105 hover:-translate-y-1 transition-all">
  ...
</div>

<!-- التأثير على الأبناء بـ group -->
<div class="group cursor-pointer">
  <h3 class="group-hover:text-indigo-400">عنوان يتلون</h3>
</div>

2. مرجع الحالات والانتقالات

بادئات الحالة

hover:* — عند التمرير
focus:* — عند التركيز
active:* — عند الضغط
disabled:* — عند التعطيل
group-hover:* — عند hover على الأب

الانتقالات

transition — انتقال أساسي
transition-all — كل الخصائص
transition-colors — الألوان فقط
transition-transform — التحويلات
duration-300 — 300ms

Transform

scale-105 — تكبير 5%
scale-95 — تصغير 5%
rotate-3 — دوران 3 درجات
-translate-y-1 — رفع للأعلى

الظلال التفاعلية

shadow-lg — ظل افتراضي
hover:shadow-xl — أكبر عند hover
hover:shadow-sky-500/30 — ظل ملوّن

3. قوة group-hover: التأثير الجماعي

عند إضافة group للأب، يمكنك تطبيق تأثيرات على الأبناء عندما يُمرر الماوس على الأب — وليس على الابن مباشرة.

html

<div class="group cursor-pointer bg-slate-800 p-6 rounded-2xl
            hover:bg-slate-750 transition-all">
  <div class="w-12 h-12 rounded-xl bg-indigo-500/20
              group-hover:bg-indigo-500 group-hover:scale-110
              transition-all">
    A
  </div>
  <h3 class="group-hover:text-indigo-400 transition-colors">
    عنوان يتفاعل مع hover الأب
  </h3>
</div>

التطبيق العملي المباشر

تحدي الدرس الثاني: مكتبة تفاعلات كاملة

قم بالتعديل على الكود بداخل المحرر أدناه لتطبيق المتطلبات التالية:

غيّر لون التحويم للزر إلى hover:bg-emerald-600 مع hover:shadow-emerald-500/30.
أضف space-y-8 p-8 للحاوية الرئيسية (غلّف الكل في <div>).
أضف زراً ثانياً بـ focus:ring-4 focus:ring-sky-500/50 focus:outline-none.
أضف زراً ثالثاً يستخدم hover:-translate-y-1 للحركة العمودية.
أضف حقل إدخال (input) بـ focus:ring-2 focus:ring-indigo-500.
أضف بطاقة group cursor-pointer تحتوي على أيقونة وأي عنوان يلونان معاً عبر group-hover:.

⏳ جارٍ تحميل المحرر التفاعلي...

الدرس السابق الانتقال للدرس الثالث