تم تصميم أوراق الأنماط المتتالية (CSS) باستخدام امتداد أو XML (بما في ذلك XHTML و SVG). إنها لغة ورقة أنماط تستخدم بشكل أساسي لوصف العناصر من خلال سلسلة متنوعة من طرق التنسيق. إحدى الطرق هي التحويم وفي هذه المقالة ، سوف نفهم Hover في CSS بالطريقة التالية:
- ما هو Hover in CSS؟
- أين يتم استخدام Hover؟
- ماذا تفعل Hover؟
- التوافق
- كيف يعمل؟
- تغيير لون الخلفية مع التمرير إلى 'أحمر'
- إنشاء عتامة التحويم على الصور
- إنشاء نص تراكب على الصور
ما هو Hover in CSS؟
CSS hover هو مكون محدد يتم استخدامه لتصميم عناصر مختلفة عندما يحوم مؤشر الماوس فوقها. يمكن استخدامها على كل عنصر HTML تقريبًا. ميزة التمرير في CSS لها أهمية كبيرة في تصميم صفحات الويب.
يمكن لعنصر التمرير تمييز صفحات الويب وترميزها وتخصيصها وفقًا لتفضيلات المستخدم في برنامج تصميم ويب مدمج وفعال.
أين يتم استخدام Hover؟
يمكن تسليط الضوء على الأمثلة الأكثر شيوعًا لجدوى ميزة التمرير على مواقع التسوق الرئيسية مثل Flipkart و Amazon. عندما يحوم المستخدمون فوق أي منتج على مواقع التجارة الإلكترونية هذه ، تتم برمجة المنتج لأداء وظيفة تحريك تلقائي للتكبير / التصغير لتزويد العميل برؤية أفضل لمنتجاتهم المحددة. من خلال هذه البرمجة ، تم تصميم صفحة الويب لعرض عرض مدمج لمجموعة المنتجات بأكملها مصحوبة برؤية تفصيلية للمنتج محل الاهتمام في تصميم صفحة ويب واحدة.
ماذا تفعل Hover؟
التمرير هو أداة برمجة متعددة الوظائف يمكن للمستخدم من خلالها تخصيص العنصر المستهدف بعدد لا نهائي من معايير التنسيق. تتضمن بعض أمثلة المعرفة التشغيلية لميزة التمرير ما يلي:
- تغيير لون الخلفية / الخط
- تضمين نص مخفي يتم عرضه عند المرور فوق
- إنشاء تأثيرات التمرير على الصور
- التكبير الآلي على النص / الصور
- تعديل عتامة الصورة
- تضمين النص
- تبادل الصور
- Div. يحوم
- عمليات تنسيق تحوم متعددة أخرى في CSS.
يعمل تأثير التمرير بشكل أساسي على تعديل قيمة خاصية العنصر لتمكين تحريك التغييرات على النص / الصورة المحددة أو العناصر ذات الصلة. يؤدي تضمين عناصر تحوم CSS في تصميم صفحة الويب إلى تحويل صفحة الويب العادية إلى صفحة ويب تفاعلية وقوية وعملية للغاية. تصميمات صفحات الويب هذه سهلة الاستخدام وشاملة. تحتوي صفحات الويب المصممة Hover على جاذبية أعلى للمستهلكين وتجذب انتباه العملاء المحتملين.
كيفية تثبيت hadoop في لينكس
توافق Hover في CSS
تتوافق ميزة التمرير مع جميع متصفحات الويب الرئيسية. ومع ذلك ، فإن تنفيذ هذا العنصر على الأجهزة التي تعمل باللمس لا يزال يمثل مهمة صعبة. يتيح التمرير في CSS إمكانية الوصول إلى المحتوى على الأجهزة التي لا تدعم وظائف التمرير. لقد لوحظ أن وظيفة التمرير النشطة على الجهاز غير الداعم يمكن أن تتعطل على الجهاز.
وبالتالي ، يتم حظر العرض الحيوي للمحتوى المهم من خلال مشكلة التنسيق. من ناحية ، حيث يساهم عنصر التمرير في برنامج CSS في مستوى كبير من التخصيص الفعال لصفحات الويب على العكس من ذلك ، فإن قابليته للتشغيل على الأجهزة المحمولة نائمة للغاية. من خلال الاستجابة للظروف التي ينمو فيها عالم تكنولوجيا المعلومات بشكل كبير ، فإن ميزة التحويم تخاطر بأن تصبح عتيقة مع التقدم التكنولوجي. لذلك ، فإن الحاجة إلى تصنيع ميزة مضمنة محمولة تعمل مع أجهزة اللمس والأجهزة المحمولة أمر بالغ الأهمية.
كيف يعمل Hover في CSS؟
يسود نمط الفئة الزائفة النشط في تنسيق التحويم في CSS ويتخطى أي / كل الروابط اللاحقة التي تتبعها هذه الفئة الزائفة. على سبيل المثال في فئة pseudo-class ': link: visit أو: active: يجب وضع قاعدة التمرير بعد: link and: visit ولكن before: active for appropriate: hover style. ترتيب LVHA:: link ،: hover ،: تم الزيارة ، و: active يستخدم كمرجع لأسلوب تنسيق التمرير الصحيح.
div {background-color: green padding: 18px display: none} span: hover + div {display: block}اختبار تحوم!يظهر الرمز المخفي عند التمريرفي الكود أعلاه ، تم تعديل عنصر span لدمج عنصر hover و div باستخدام عنصر span: hover + div. سيعرض عنصر الامتداد الذي سيتم عرضه على صفحة الويب المقصودة الأساسية النص 'اختبار التحويم!' يؤدي التمرير الإضافي فوق عنصر الامتداد إلى الكشف عن عنصر div 'يظهر رمز مخفي عند التمرير'. يعمل تنسيق التضمين هذا على النص وكذلك الصور.
تغيير لون الخلفية مع التمرير إلى 'أحمر'
p: hover، h1: hover، a: hover {background-color: Red}تحوم الأحمر
تحوم الأحمر
الروابط:
اختبار التحويم باللون الأحمر:
جوجل كوم ملحوظة: مرحبا
يخصص الكود أعلاه ملف
و