عند النقر وأثناء التحديد
هنا سنكتشف كيف يتم التفاعل بشكل أكثر دقة في CSS. و سنرى هنا كيفية تغيير مظهر العناصر عندما نضغط عليها وعندما يتم تحديدها!
active: لحظة النقر
التنسيق الزائف active: يسمح بتطبيق نمطٍ معينٍ لحظة النقر. من الناحية العملية ، يتم استخدامه فقط على الروابط.
هذا الرابط يحتفظ بمظهر التأثير لوقت قصيرٍ جدًا: وذلك لأن التغيير يحدث عند الضغط على زر الماوس. ولن يكون مرئياً بالضرورة دائماً .
على سبيل المثال ، يمكننا تغيير لون خلفية الرابط عندما نضغط عليه:
|
1 2 3 4 |
a:active /* عندما ينقر المستخدم على الرابط */ { background-color: #A6FFA6; } |
يتغير لون خلفية الرابط عندما ينقر المستخدم على الرابط
focus: عند تحديد العنصر
هنا الأمر مختلف عن سابقه قليلاً. التنسيق الزائف: focus: يسمح بتطبيق نمطٍ معينٍ عند تحديد العنصر.
ماذا يعني هذا؟
بمجرد النّقر على الرابط، يحتفظ هذا الرابط بصفته كعنصر محدد بحيث تظهر حدود صغيرة من حول الرابط.
دعونا نطبق هذا التأثير في الوقت الراهن على الروابط:
|
1 2 3 4 |
a:focus /* عندما يقوم الزائر باختيار الرابط */ { background-color: #A6FFA6; } |
إذا كنت تستعمل المتصفح Google Chrome أو Safari ، فإن التأثير لن يكون مرئياً إلا إذا ضغطت على المفتاح Tab.
إذا كان الرابط محدداً سلفاً
في الغالب و بشكل افتراضي يقوم المتصفح بتلوين الروابط التي تم استهدافها بلون أرجواني (violet) ! يرى البعض أن هذا اللَّون غير مرغوب فيه و يجب تغيير النمط ليكون أكثر جاذبية!
و لفعل ذلك فإن CSS يسمح لنا بتغيير هذا المظهر باستعمال :visited الذي يعني أن هذا الرابط تمَّتْ زيارته . من ناحية الممارسة العملية ، فإننا لن نستطيع فعل الكثير على مظهر الروابط سوى تغيير لونها .
نبقى مع التطبيق في المثال التالي:
|
1 2 3 4 |
a:visited /* عندما يتم زيارة الرابط من طرف الزائر */ { color: #DC32BE; } |
الروابط التي تمت زيارتها باللون الوردي اللامع
إذا كنت لا ترغب في تلوين الروابط التي تمت زيارتها بالفعل، فإنه فيتعين عليك تطبيق نفس لون الروابط . ” تقوم العديد من مواقع الويب بهذا بما في ذلك jabism.com! “.
خلاصة الــدرس:
في CSS ، يمكنك استعمال عدة تأثيرات على مظهر عناصر معينة عن طريق الحركة والتنقل ،وذلك بعد تحميل الصفحة. و نستخدم لهذا الغرض التنسيقات الزائفة.
- يتيح لك التنسيق الزائف: hover: تغيير مظهر عبر تمرير الماوس فوق العنصر المقصود.
- على سبيل المثال: a: hover لتغيير مظهر الروابط عند تمرير الماوس عليه.
- يقوم التنسيق الزائف: active: بتعديل مظهر الروابط لحظة النقر
- يقوم التنسيق الزائف: visited: بتعديل مظهر الروابط للإشارة بأن الرابط تم زيارته.
- يتيح لك التنسيق الزائف: focus: تغيير مظهر العنصر المحدد.
إلى هنا تكون حصة اليوم قد انتهت ، وستكون لنا حصة خاصة بالتأثير على الصور باستعمال CSS
فـــــي أمـــان الله
