41. الفئات الزائفة: التفاعل

تسمح لك الفئات الزائفة بتحديد العناصر بناءً على حالتها، بدلاً من مجرد اسمها أو سماتها. وهي ضرورية لإضافة التفاعل وتغذية راجعة للمستخدم.

النحو (Syntax)

تبدأ الفئات الزائفة بنقطتين رأسيتين واحدة (:).

الفئات الزائفة التفاعلية الشائعة

1. :hover

تنطبق عندما يحوم مؤشر ماوس المستخدم فوق العنصر.

css .button { background-color: blue; color: white; }

.button:hover { /* يتغير عندما يكون الماوس فوق الزر / background-color: darkblue; cursor: pointer; / يغير مؤشر الماوس إلى أيقونة اليد */ }

2. :active

تنطبق عندما يتم النقر على العنصر (الضغط المستمر بالماوس).

css .button:active { transform: translateY(2px); /* يجعل الزر يبدو كأنه 'مضغوط' للأسفل */ box-shadow: none; }

3. :focus

تنطبق عندما يتم اختيار العنصر حالياً (على سبيل المثال، حقل إدخال في نموذج عندما يكتب المستخدم، أو رابط يتم اختياره عبر مفتاح Tab). ضروري لإمكانية الوصول.

css input[type="text"]:focus { outline: 2px solid orange; /* يوصى به بشدة للرؤية */ border-color: orange; }

قاعدة L-V-H-A (ترتيب حالات الروابط): بالنسبة للروابط، حدد الحالات دائماً بهذا الترتيب: :link, :visited, :hover, :active. إذا جاءت :hover قبل :visited ، فقد تلغي :visited حالة :hover بسبب ترتيب الـ cascade.