أوراق الأنماط المتتالية (كس) هي الأداة الرئيسية لتصميم صفحات الويب. إنها تسمح لك بتغيير مظهر العناصر اعتمادا على الأحداث المختلفة ، مثل تحريك مؤشر الماوس فوق عنصر. في هذه المقالة ، سننظر في كيفية تغيير أنماط عنصر واحد عند التمرير فوق عنصر آخر باستخدام كس.
لتغيير أنماط عنصر واحد عند التمرير فوق عنصر آخر ، يمكنك استخدام الفئات الزائفة :تحوم و :لا. الفئة الزائفة:يتم تطبيق التمرير على عنصر عندما يتم تمرير مؤشر الماوس فوقه. باستخدام هذه الفئة الزائفة ، يمكنك تعيين أنماط جديدة لعنصر عند تحريك المؤشر فوقه. الفئة الزائفة: لا يسمح لك باستبعاد عنصر معين من التحديد.
: ليس(.العنصر) {
- / * الأنماط */
- }
- في المثال أعلاه ، نستخدم الفئة الزائفة: تحوم لتغيير أنماط عنصر مع فئة "العنصر" عندما يحوم المؤشر فوقه. لاستبعاد عنصر معين من التحديد ، نستخدم فئة زائفة :عدم تحديد فئة العنصر الذي نريد استبعاده.
- كيفية تغيير أنماط عنصر عند التمرير فوق عنصر آخر
تغيير الأنماط باستخدام كس
عند التمرير فوق عنصر
سؤال وجواب
كيف يمكنني تغيير لون النص عند التمرير فوق الزر?
كيف يمكنني تغيير لون الخلفية من كتلة عندما تحوم فوق ارتباط?
كيف يمكنني تغيير حجم الرمز عند التمرير فوق صورة?
كيف يمكنني تغيير نمط الفقرة عند التمرير فوق العنوان?
كيفية تغيير أنماط عنصر عند التمرير فوق عنصر آخر
في كس ، من الممكن تغيير أنماط عنصر واحد عند التمرير فوق عنصر آخر. للقيام بذلك ، يمكنك استخدام الفئة الزائفة :تحوم.
في ما يلي مثال على التعليمات البرمجية التي تغير لون النص عند التمرير فوق ارتباط:
ج: تحوم {
اللون: أحمر;
}
في هذا المثال ، عندما تحوم فوق الارتباط ، سيتغير لون النص إلى اللون الأحمر.
يمكنك أيضا تغيير الخصائص الأخرى لعنصر ما عند التمرير فوق عنصر آخر. في ما يلي مثال على التعليمات البرمجية التي تغير لون خلفية الجدول عند التمرير فوق خلية:
الدفتيريا: تحوم {
الخلفية اللون: ليتبلو;
}
في هذا المثال ، عندما تحوم فوق خلية جدول ، سيتغير لون خلفية الجدول بأكمله إلى اللون الأزرق الفاتح.
باستخدام الفئة الزائفة: تحوم ، يمكنك إنشاء تأثيرات ورسوم متحركة مختلفة عند التمرير فوق عناصر صفحة الويب. هذه ميزة مفيدة للغاية تتيح لك جعل الواجهة أكثر تفاعلية وجاذبية للمستخدمين.
تغيير الأنماط باستخدام كس
يمكنك تغيير أنماط العناصر على صفحة ويب باستخدام كس (أوراق الأنماط المتتالية). كس يسمح لك لتحديد مظهر وموقع العناصر على الصفحة ، وكذلك إضافة تأثيرات مختلفة ، مثل تغيير النمط عند تحوم أو النقر على عنصر.
إحدى الطرق الشائعة لتغيير أنماط عنصر واحد عند التمرير فوق عنصر آخر هي استخدام الفئة الزائفة :تحوم. فئة زائفة :يسمح لك التمرير بتطبيق الأنماط على عنصر عند تحريك المؤشر فوقه.
من أجل تغيير نمط عنصر واحد عند التمرير فوق عنصر آخر ، يكفي كتابة رمز كس المناسب. على سبيل المثال ، إذا كنت بحاجة إلى تغيير لون نص الرابط عند التمرير فوقه بالماوس ، فيمكنك استخدام الكود التالي:
ج: تحوم {
اللون: أحمر;
}
وبالتالي ، عندما تحوم فوق رابط باللون الأحمر ، فإنه سيغير لونه إلى اللون الأحمر.
- يمكنك أيضا تغيير أنماط أخرى للعنصر ، مثل لون الخلفية والخط والأبعاد والمزيد. في الوقت نفسه ، من المهم تحديد العنصر المناسب الذي سيتم تطبيق الفئة الزائفة عليه :التمرير.
- اعتمادا على المهمة ، يمكنك استخدام محددات مختلفة لتحديد العناصر التي سيتم تطبيق الأنماط عليها عند التمرير. على سبيل المثال ، يمكنك تطبيق الأنماط على عنصر عند التمرير فوق الأصل أو الجار التالي.
- نتيجة لاستخدام فئة الزائفة المغلق :يتيح لك التمرير إنشاء تأثيرات تفاعلية على صفحات الويب ، مما يجعلها أكثر جاذبية وسهولة في الاستخدام.
- عند التمرير فوق عنصر
كس لديه خاصية خاصة: تحوم ، والذي يسمح لك لتعيين أنماط عنصر عند تحريك المؤشر فوقه. هذا يجعل من الممكن تغيير العنصر بصريا ، وجعله أكثر تعبيرا أو جاذبية للمستخدم.
لتطبيق الأنماط على عنصر عند التمرير فوق عنصر آخر ، يمكنك استخدام محددات التعشيش.
على سبيل المثال ، لدينا قائمة بعدة عناصر ، ونحتاج إلى إضافة نمط إلى عنصر القائمة عند التمرير فوق القائمة نفسها:
الركن 1
الركن 2
الركن 3
| الركن 4 | للقيام بذلك ، يمكننا استخدام رمز كس التالي: | المجاهدين: تحوم لى { |
| لون الخلفية: أصفر; | } | وبالتالي ، عند التمرير فوق القائمة ، ستغير جميع عناصرها لون الخلفية إلى اللون الأصفر. |
| يمكنك أيضا تطبيق الأنماط على عنصر الأصل عند التمرير فوق العنصر الفرعي الخاص به. على سبيل المثال ، لدينا جدول ونريد تغيير لون خلفية الصف عند التمرير فوق أي خلية في هذا الصف: | الخلية 1 | الخلية 2 |
الخلية 3
الخلية 4
الخلية 5
الخلية 6
الخلية 7
الخلية 8
الخلية 9
للقيام بذلك ، يمكننا استخدام رمز كس التالي:
آر:تحوم {
لون الخلفية: أصفر;
}
الآن ، عندما تحوم فوق أي خلية في الجدول ، سيغير الصف بأكمله لون الخلفية إلى اللون الأصفر.
باستخدام خاصية كس: تحوم عندما تحوم فوق عنصر يسمح لك لخلق تأثيرات تفاعلية وتحسين التجربة البصرية للمستخدمين.
سؤال وجواب
كيف يمكنني تغيير لون النص عند التمرير فوق الزر?