يشير المؤشر إلى الموضع على الشاشة حيث يمكن للمستخدم النقر فوق النص أو إدخاله. يمكن أن تكون هناك مؤشرات مختلفة مستخدمة لمكونات مختلفة لموقع الويب. يجب على المطور التأكد من أن المؤشرات المستخدمة في التطبيق يجب أن تكون جذابة. على سبيل المثال ، يمكن استخدام مؤشر يد التأشير على الزر الموجود على مؤشر الماوس. يتم استخدام مؤشر النص (الخط الوامض) في مربع النص حيث سيتم إدخال النص.
هناك العديد من أنماط المؤشر في CSS يتم استخدامها فقط من خلال تحديد قيمة خاصية المؤشر. ومع ذلك ، يمكن للمطور إنشاء مؤشر مخصص باستخدام CSS.
سيوفر دليل الدراسة هذا ما يلي:
-
- مؤشر CSS
- مؤشر مخصص CSS
قبل الالتقاء بالموضوع ، دعنا نرى بعض أشكال مؤشر CSS مع مثال عملي.
مؤشر CSS
CSS ' المؤشر 'تحتوي الخاصية على قيم مختلفة ، مثل المؤشر ، ولا شيء ، والتقدم ، والمزيد. لنقم بإنشاء جدول يحتوي على صفوف تظهر عليها مؤشرات مختلفة عند تمرير الماوس.
مثال: إنشاء جدول يمثل مؤشرات CSS مختلفة في HTML
أولاً ، أضف عنصر
. تحتوي علامات | |||
---|---|---|---|
لملء الأعمدة بالبيانات.
الثانية عناصر الأزرار التي يتم تطبيقها مع CSS ' المؤشر 'ذات قيم مختلفة.
| فيما يلي رمز HTML للسيناريو أعلاه: < الطاولة >< آر > < العاشر نمط = 'العرض: 200 بكسل ؛' > محدد مؤشر css العاشر > < العاشر نمط = 'العرض: 200 بكسل ؛' > نمط المؤشر العاشر > آر > < آر > < td > المؤشر: المؤشر td > < td > < زر نمط = 'المؤشر: المؤشر' > المؤشر زر > td > آر > < آر > < td > المؤشر: التقدم td > < td > < زر نمط = 'المؤشر: التقدم' > تقدم زر > td > آر > < آر > < td > المؤشر: غير مسموح به td > < td > < زر نمط = 'المؤشر: غير مسموح به ؛' > غير مسموح زر > td > آر > < آر > < td > المؤشر: لا شيء td > < td > < زر نمط = 'المؤشر: لا شيء ؛' > لا أحد زر > td > آر > < آر > < td > المؤشر: تحرك td > < td > < زر نمط = 'المؤشر: نقل' > يتحرك زر > td > آر > < آر > < td > المؤشر: انتزاع td > < td > < زر نمط = 'المؤشر: انتزاع' > إختطاف زر > td > آر > < آر > < td > المؤشر: نسخ td > < td > < زر نمط = 'المؤشر: نسخ ؛' > ينسخ زر > td > آر > < آر > < td > المؤشر: col-resize td > < td > < زر نمط = 'cursor: col-resize؛' > حجم العمود زر > td > آر > < آر > < td > المؤشر: صف تغيير الحجم td > < td > < زر نمط = 'cursor: row-resize؛' > صف تغيير الحجم زر > td > آر > < آر > < td > المؤشر: نص td > < td > < زر نمط = 'المؤشر: نص ؛' > نص زر > td > آر > الطاولة > نمط 'جميع' العناصر * {حشوة: 0 ؛ حافة: 0 ؛ عائلة الخطوط: Arial ، Helvetica ، sans-serif ؛ }
عنصر نمط 'الجدول' الطاولة {الهامش: 0px auto؛ الحدود: مكاسب صلبة 1 بكسل ؛ }
' حافة 'تتصرف على النحو المحدد أعلاه. عنصر النمط 'td' td {محاذاة النص: مركز ؛ } مع الخاصية ' محاذاة النص 'بالقيمة' المركز '. سيتم محاذاة نص العمود في المركز.
| عنصر نمط 'زر' زر {لون الخلفية: cadetblue. الحشو: 10 بكسل 10 بكسل ؛ اللون: #ffffff ؛ العرض: 150 بكسل ؛ }
سيولد الرمز أعلاه النتيجة التالية: مؤشر مخصص CSSيجب على المطورين استخدام مؤشرات مناسبة لتطبيقاتهم. يجب أن تكون المؤشرات جذابة لجذب انتباه المستخدمين. علاوة على ذلك ، يمكن إنشاء المؤشر المخصص لهذا الغرض. انظر للمثال ادناه! مثال: كيفية إنشاء مؤشر مخصص باستخدام CSS؟ في HTML ، أضف عنصري div. واحد مع الفصل ' دائرة 'والآخر مع الفصل' نقطة '. لغة البرمجة < شعبة صف دراسي = 'دائرة' > شعبة >< شعبة صف دراسي = 'نقطة' > شعبة > عنصر نمط 'الجسم' الجسم {الارتفاع: 100 فولت } نمط 'دائرة' div .دائرة {العرض: 20 بكسل ؛ الارتفاع: 20 بكسل ؛ الحدود: 2 بكسل بيضاء صلبة ؛ نصف قطر الحد: خمسون ٪ ؛ }
أسلوب 'نقطة' div .نقطة {العرض: 5 بكسل ؛ الارتفاع: 5 بكسل ؛ لون الخلفية: أبيض؛ نصف قطر الحد: خمسون ٪ ؛ }
سيعرض الرمز المحدد المؤشر التالي على صفحة الويب: جافا سكريبت < النصي >const cursorCircle = document.querySelector ( '.دائرة' ) ؛ const cursorPoint = document.querySelector ( '.نقطة' ) ؛ const moveCursor = ( و ) = > { const mouseY = e.clientY ؛ const mouseX = e.clientX ؛ cursorCircle.style.transform = ' ترجمة ( $ {mouseX} بكسل ، $ {mouseY} مقصف ) ' ؛ cursorPoint.style.transform = ' ترجمة ( $ {mouseX} بكسل ، $ {mouseY} مقصف ) ' ؛ } window.addEventListener ( 'تحرك الماوس' ، moveCursor ) النصي >
بعد توفير الكتل البرمجية أعلاه ، سيتحرك المؤشر تلقائيًا على الشاشة كما هو موضح أدناه: استنتاجCSS ' المؤشر 'تحتوي الخاصية على العديد من القيم التي تشير إلى أنماط المؤشر المختلفة. ومع ذلك ، من خلال استخدام عناصر HTML وخصائص CSS ، يمكننا إنشاء مؤشرات مخصصة. بعد ذلك ، يتم تنفيذ كود JavaScript لتنشيط وظائفه. أوضحت هذه الدراسة كيفية إنشاء مؤشرات CSS مخصصة مع مثال عملي. |