كيفية تغيير لون زر عندما تحوم في كس: دليل مفصل

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

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

الفئة الزائفة: يسمح لك التمرير بتطبيق الأنماط على عنصر عند تحريك مؤشر الماوس فوقه. لتطبيق الأنماط عند التمرير فوق زر ، استخدم بناء الجملة التالي:

زر: تحوم {' {'}

أنماط زر التمرير

{‘}’}

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

1. يعد تغيير لون الزر عند التمرير في كس أمرا مهما لإنشاء عناصر تفاعلية مذهلة
2. الخصائص الرئيسية في كس التي تسمح لك لتغيير لون الزر على تحوم
3. مثال على استخدام فئة زائفة: قم بالمرور لتغيير لون الزر
4. إعدادات إضافية لإنشاء تأثير فريد عند التمرير فوق الزر
5. كيفية استخدام التدرجات لتغيير لون زر على تحوم
6. مزايا استخدام تحوم زر تغيير اللون في المغلق لتصميم مواقع الإنترنت
7. التوافق عبر المتصفح وتغيير لون الزر عند التمرير في كس
8. سؤال وجواب
9. هل من الممكن تغيير لون الزر على تحوم باستخدام فئة المغلق?

يعد تغيير لون الزر عند التمرير في كس أمرا مهما لإنشاء عناصر تفاعلية مذهلة

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

لتغيير لون الزر عند التمرير في كس ، يمكنك استخدام الفئة الزائفة: تحوم. يتم تطبيق هذه الفئة الزائفة على عنصر عندما يحوم المستخدم فوقه بالماوس.

مثال على استخدام فئة زائفة: قم بالمرور لتغيير لون الزر:

1. نقطة
3. }

أضف أنماط كس لزر التمرير عن طريق تغيير لون خلفية الزر:

• زر: تحوم {

لون الخلفية: #4كاف 50;

}

في هذا المثال ، سيكون للزر لون الخلفية الأصلي # 3إي8إي41 وسيتغير إلى اللون #4كاف 50 عند تحريك مؤشر الماوس فوقها.

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

الخصائص الرئيسية في كس التي تسمح لك لتغيير لون الزر على تحوم

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

: التحويم هو فئة زائفة تطبق الأنماط على عنصر عندما يتم تمرير المؤشر فوقها;

لون الخلفية هو خاصية تحدد لون الخلفية لعنصر ما;

الانتقال هو خاصية تحدد الانتقال السلس بين حالات العنصر.

1. لتغيير لون الزر عند التمرير ، يجب عليك أولا تعيين لون الخلفية الحالي للزر باستخدام خاصية لون الخلفية. بعد ذلك ، باستخدام الفئة الزائفة :تحوم ، يمكنك تعيين لون خلفية زر جديد عند تحريك المؤشر. أخيرا ، لإنشاء انتقال سلس بين حالات الأزرار ، يمكنك استخدام خاصية الانتقال.

مثال على الكود:

2. .زر {

لون الخلفية: # ف 0000;	الانتقال: لون الخلفية 0.3 ثانية سهولة;	}
.زر: تحوم {	لون الخلفية: #0000;	}
في هذا المثال ، في الحالة العادية للزر ، ستكون خلفيته حمراء (#ف 0000) ، وعند التمرير ، ستكون خضراء (#00 ف 00). سيتم إنشاء انتقال سلس بين هاتين الحالتين ، والذي سيستغرق 0.3 ثانية وسيحدث مع تغيرات الضوء (سهولة).	مع هذه الخصائص الرئيسية في كس ، يمكنك بسهولة تغيير لون الزر عند تحريك المؤشر وإنشاء عناصر تفاعلية على موقع الويب الخاص بك.	مثال على استخدام فئة زائفة :تحوم لتغيير لون الزر

3. في كس ، يمكنك استخدام الفئة الزائفة: تحوم لتغيير أنماط عنصر عند تحريك المؤشر فوقه. هذه ميزة مفيدة تتيح لك إنشاء عناصر تفاعلية على صفحة الويب.

• يوضح المثال أدناه كيفية تغيير لون خلفية الزر عندما يحوم المؤشر فوقه:

رمز هتمل من الزر:

حرك المؤشر

الأنماط في كس:

• المعنى.زر
• .زر: تحوم
• عندما يحوم المؤشر فوق الزر ، تتغير خلفيته من الأزرق إلى الأحمر بفضل الفئة الزائفة: تحوم. يؤدي هذا إلى إنشاء تأثير تغيير لون الزر عند تحريك المؤشر فوقه.
• إعدادات إضافية لإنشاء تأثير فريد عند التمرير فوق الزر

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

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

معلومات أساسية

وتعيين نمط الخلفية المطلوب أو التدرج.

1. تحويل: مقياس()
2. وزيادة أو تقليل حجم الزر.

تغيير النص: تأثير آخر مثير للاهتمام هو تغيير النص على الزر عند التمرير فوقه. للقيام بذلك ، يمكنك استخدام الزائفة

- العنصر:: بعد

وإضافة نص جديد باستخدام الخاصية

المحتوى

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

أولا ، سنحتاج إلى إنشاء زر باستخدام هتمل و كس:

إنشاء عنصر زر باستخدام علامة

وإعطائها فئة أو معرف.

أضف أنماطا للزر ، بما في ذلك لون الخلفية ولون النص.

الآن نحن على استعداد لاستخدام التدرجات لتغيير لون الزر على تحوم. في كس ، قم بإنشاء قاعدة جديدة لفئة الزر أو المعرف:

زر: تحوم {

صورة الخلفية: التدرج الخطي (إلى الأسفل ، #ففاف 4 ب ، #فف 8 ف 20);

}

في هذا المثال ، نستخدم تدرجا خطيا يتغير من اللون العلوي

# فف 4 ب

حتى اللون السفلي

# 8 و 20

.

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

لإنشاء تدرجات أكثر تعقيدا ، يمكنك استخدام معلمات مختلفة مثل اتجاه التدرج ، وتوقف اللون ، ونوع التدرج (خطي أو شعاعي).

يمكن أن يؤدي استخدام التدرجات لتغيير لون زر التمرير إلى تحسين التجربة المرئية لموقع الويب الخاص بك بشكل كبير وجعله أكثر إثارة للاهتمام للمستخدمين.

مزايا استخدام تحوم زر تغيير اللون في المغلق لتصميم مواقع الإنترنت

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

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

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

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

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

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

.زر: تحوم {

لون الخلفية: # ف 0000;