الهدف من هذا الدليل هو استكشاف كيفية تغيير صورة عند التمرير باستخدام CSS. لذا ، فلنبدأ!
ما هو: hover in CSS؟
يعد: hover عنصرًا من فئة pseudo يستخدم لتغيير حالة عناصر HTML عندما يقوم الماوس بتشغيلها. يتم استخدام محدد CSS هذا بشكل أساسي لتصميم العناصر أو تحديدها. ومع ذلك ، لا يمكن تطبيقه على الروابط.
بناء الجملة
بناء جملة: hover معطى أدناه:
عنصر : يحوم {
كود CSS. . .
}
هنا، ' عنصر 'يشير إلى العنصر الذي تريد تطبيق تأثير التمرير فيه.
الآن ، سننتقل إلى المثال العملي لتغيير الصورة عند التمرير باستخدام CSS.
مثال: كيفية تغيير الصورة عند التمرير باستخدام CSS؟
لتغيير الصورة عند التمرير أولاً ، أضف صورتين في قسم HTML. الصورة الأولى للحالة النشطة ، والصورة التالية لحالة التمرير.
الخطوة الأولى: إضافة الصور
للغرض المحدد ، سنضيف صورتين ، ' الصورة 1 ' و ' صورة 2 '، وتعيين اسم الفئة للصورة الثانية كـ' hover_img '.
لغة البرمجة
< هيئة >< شعبة صف دراسي = 'img' >
< IMG src = 'image1.png' >
< IMG src = 'image2.png' صف دراسي = 'hover_img' >
< / شعبة >
< / هيئة >
الخطوة 2: نمط الصور
الآن ، انتقل إلى CSS لتعيين موضع كلتا الصورتين باستخدام ' موقع ' منشأه. سنحدد موقفها كـ ' مطلق 'لوضعه تمامًا بالإشارة إلى أقرب والد.
CSS
.img {موقع : مطلق ؛
}
سيظهر هذا النتيجة التالية:
في الخطوة التالية ، سنقوم بتعيين الصورة الثانية أمام الصورة الأولى. للقيام بذلك ، سنقوم بتعيين موضع الصورة كـ ' مطلق 'وتعيين الموضع العلوي والأيسر كـ' 0 '. يتم وضع استخدام هذه الصورة أمام الصورة الأولى ، لكننا نريد عرض الصورة الثانية عند تحريك الماوس فوقها. لذا ، فإن تعيين قيمة العرض على أنها ' لا أحد سيظهر النتيجة المرجوة:
.hover_img {موقع : مطلق ؛
أعلى : 0 ؛
اليسار : 0 ؛
عرض : لا أحد ؛
}
ناتج الكود هو كما يلي:
تم إخفاء الصورة الثانية بنجاح خلف الصورة الأولى.
الآن ، انتقل إلى الخطوة التالية.
الخطوة 3: تغيير الصورة عند التمرير
بعد ذلك ، استخدم ' :يحوم 'وحدد' .img 'لتطبيق التمرير على العنصر المحدد. بعد ذلك ، قم بتعيين اسم فئة الصورة الثانية ' .hover_img '. بعد ذلك ، داخل الأقواس ، عيّن قيمة خاصية العرض على أنها ' في النسق 'مما سيجبر العنصر على الاحتواء في نفس السطر:
.img : يحوم .hover_img {عرض : في النسق ؛
}
هذه هي النتيجة التي توضح أن الصورة قد تغيرت عندما يحوم المستخدم فوقها:
يشير الإخراج الوارد أعلاه إلى أننا نجحنا في تغيير الصورة عند التمرير باستخدام CSS.
استنتاج
يمكن تغيير الصورة عند التمرير باستخدام زر ' :يحوم 'عنصر من فئة زائفة. للقيام بذلك ، أضف الصور المطلوبة في ملف HTML ، واضبطها في نفس الموضع باستخدام CSS ، وقم بتطبيق: hover selector عليها. نتيجة لذلك ، ستتغير الصورة الأولى عند التمرير فوقها. في هذه المقالة ، أوضحنا كيفية تغيير صورة عند التمرير باستخدام: hover مع مثال عملي.