33- كورس CSS للمبتدئين – CSS: pseudo-classes مثل hover و focus

مقدمة إلى CSS Pseudo-Classes

CSS Pseudo-Classes هي أدوات قوية تتيح للمطورين تحسين تجربة المستخدم وتفاعلهم مع العناصر المختلفة على صفحات الويب. تقدم هذه الفئات الوهمية إمكانية تحديد نمط معين للعناصر في حالات معينة دون الحاجة إلى إضافة فئات (classes) جديدة إلى HTML. من بين أبرز هذه الفئات pseudo-classes هي “:hover” و”:focus”، حيث تستخدم لتحسين التفاعل مع العناصر.

تعريف واستخدام Pseudo-Class :hover

الـ “:hover” هي واحدة من أكثر الـ pseudo-classes شيوعًا واستخدامًا في CSS. تُستخدم لتغيير نمط العنصر عندما يقوم المستخدم بتمرير المؤشر فوقه. يمكن استخدام “:hover” مع أي عنصر HTML، مثل الروابط، الأزرار، أو حتى الصور. الهدف من ذلك هو توفير ردود فعل بصرية للمستخدم تشجعه على التفاعل بشكل أكبر مع الصفحة. على سبيل المثال، يمكن تغيير لون الزر عند المرور عليه ليشعر المستخدم بأنه قابل للنقر.

button:hover {
    background-color: #4CAF50;
    color: white;
}

في هذا المثال، سيتم تغيير لون خلفية الزر إلى الأخضر ولون النص إلى الأبيض عند تمرير المؤشر فوقه.

تعريف واستخدام Pseudo-Class :focus

أما الـ “:focus”، فهي تُستخدم لتحديد نمط العنصر عندما يكون في حالة التركيز، أي عندما يتم تحديده من قبل المستخدم عبر لوحة المفاتيح أو عند النقر عليه. هذا مهم بشكل خاص لتحسين تجربة الاستخدام للأشخاص الذين يعتمدون على لوحة المفاتيح للتنقل بين العناصر. يعد استخدام “:focus” جزءًا من تحسين الوصولية في التصميم، حيث يساعد المستخدمين في معرفة أي عنصر نشط حاليًا.

input:focus {
    border-color: #4CAF50;
    outline: none;
}

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

الدمج بين :hover و :focus

يمكن أيضًا دمج pseudo-classes مثل “:hover” و”:focus” لتحسين التفاعل مع العناصر بشكل أكبر. على سبيل المثال، يمكن أن يكون للزر نفس التأثير البصري سواء كان المستخدم يحوم فوقه بالفأرة أو يركز عليه باستخدام لوحة المفاتيح.

button:hover, button:focus {
    background-color: #4CAF50;
    color: white;
    outline: none;
}

من خلال هذا النمط، فإن التجربة البصرية للمستخدم ستكون متسقة بغض النظر عن الطريقة التي يتفاعل بها مع العنصر، مما يعزز من سهولة الاستخدام والرضا العام عن التصميم.