:hover و:focus و:active و:visited
نسّق حالات الروابط والأزرار التفاعلية باستخدام أكثر أصناف CSS الزائفة شيوعًا
:hover و:focus و:active و:visited درس مجاني في CSS Academy على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في CSS Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة CSS Academy 4 دروس في المجموع.
ما الفئات الزائفة؟
تحدد الفئات الزائفة العناصر بناءً على حالتها أو علاقتها بالعناصر الأخرى. وتبدأ بنقطتين رأسيتين مفردتين :، ولا تتطلب إضافة سمات إلى HTML.
:hover
تُطبَّق :hover عندما يكون مؤشر المستخدم فوق عنصر ما. وهي أكثر محددات الحالات التفاعلية شيوعًا.
<p><a href="#" class="demo-hover">Hover this link</a></p>
<div class="card demo-hover">Hover this card</div>
:focus
تُطبَّق :focus عندما يحصل عنصر على التركيز، سواء عبر مفتاح Tab في لوحة المفاتيح أو عبر التركيز برمجيًا. وهي مهمة جدًا لإمكانية الوصول.
<input type="text" placeholder="Auto-focused input" autofocus />
<button>Click me (focus me too)</button>
:focus-visible
تُعد :focus-visible إصدارًا أذكى من :focus — فهي تعرض مؤشر التركيز فقط عندما يتم الوصول إلى التركيز عبر لوحة المفاتيح، وليس عبر الفأرة. وبذلك يحصل مستخدمو لوحة المفاتيح على مؤشرات تركيز من دون ظهورها عند النقر بالفأرة.
<button autofocus>Keyboard-focused button shows a ring</button>
:focus-within
تُطبَّق :focus-within على عنصر عندما يكون أي عنصر من عناصره الفرعية في حالة تركيز. وهي مفيدة لتنسيق حاويات النماذج أو أشرطة البحث عند تفعيلها.
<form class="search-form"><input type="search" placeholder="Search…" autofocus /></form>
:active
تُطبَّق :active أثناء تفعيل عنصر ما — خلال النقر بالفأرة أو اللمس. وتوفر تغذية بصرية راجعة للعناصر التفاعلية.
<button class="demo-active">Pressed button (demo state)</button>
:visited
تنسّق :visited الروابط التي سبق للمستخدم زيارتها. وبسبب مخاوف الخصوصية، لا يمكن تنسيق سوى مجموعة محدودة من الخصائص باستخدام :visited، مثل color وbackground-color وborder-color وoutline-color.
<a href="#" class="demo-visited">Visited link</a>
ترتيب حالات الروابط (LVHA)
عند تنسيق حالات الروابط الأربع، اتبع ترتيب LVHA لتجنب مشاكل درجة التحديد: Link، Visited، Hover، Active.
<p><a href="#">Unvisited (link)</a></p>
<p><a href="#" class="demo-visited">Visited</a></p>
<p><a href="#" class="demo-hover">Hover</a></p>
<p><a href="#" class="demo-active">Active</a></p>
التحويم على الأجهزة اللمسية
لا تمتلك الشاشات اللمسية حالة تحويم بالطريقة نفسها التي تمتلكها الفأرة. وقد تُفعَّل :hover لفترة وجيزة عند اللمس. وللتفاعلات الخاصة باللمس، استخدم :active أو استعلام الوسائط @media (hover: none).
الجمع بين الحالات
يمكن تسلسل الفئات الزائفة لتنسيق حالات متعددة في الوقت نفسه:
<a href="#" class="demo-visited-hover">Visited link being hovered</a>
<button>Click-focused button gets no ring</button>
انتقالات حالات التحويم
أنشئ تأثيرات تحويم سلسة باستخدام الانتقالات في الحالة الأساسية، وليس في حالة :hover، حتى تعمل الانتقالية في كلا الاتجاهين:
<button class="btn demo-hover">Hover transitions smoothly</button>
تحقق سريع
أي فئة زائفة تعرض أنماط التركيز عند التنقل باستخدام لوحة المفاتيح فقط، وليس عند النقر بالفأرة؟
مراجعة
تُفعَّل :hover عند مرور المؤشر فوق العنصر، و:focus عند حصول الإدخال على التركيز، و:active أثناء النقر، و:visited للروابط التي تمت زيارتها. استخدم :focus-visible لعرض مؤشرات التركيز عند استخدام لوحة المفاتيح فقط. واتبع ترتيب LVHA لحالات الروابط. احرص دائمًا على توفير مؤشرات تركيز مرئية لإتاحة الوصول.
الأسئلة الشائعة
هل درس «:hover و:focus و:active و:visited» مجاني؟
نعم — نص درس «:hover و:focus و:active و:visited» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة CSS Academy، انتقل إلى CoddyKit PRO. تتضمن دورة CSS Academy 4 دروس في المجموع.
ماذا ستتعلم في «:hover و:focus و:active و:visited»؟
نسّق حالات الروابط والأزرار التفاعلية باستخدام أكثر أصناف CSS الزائفة شيوعًا تتمرن على CSS Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ CSS Academy؟
لا تُشترط خبرة سابقة. CSS Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.
كم من الوقت يستغرق درس «:hover و:focus و:active و:visited»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس CSS Academy هذا؟
نعم. كل درس في CSS Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- :hover و:focus و:active و:visited
- :nth-child و:nth-of-type
- :not() و:is() و:where()
- :checked و:disabled وأصناف حالات النماذج الزائفة