كيفية تغيير مظهر مؤشر الماوس في CSS

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

change mouse pointer css hero 800x400 DzTechs | كيفية تغيير مظهر مؤشر الماوس في CSS

تغيير شكل الماوس في CSS

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

.cursor { cursor: move;}

عند تحريك الماوس فوق الكائن ، سيشاهد المستخدم مؤشرًا مثل المؤشر أدناه.

change mouse pointer css move cursor DzTechs | كيفية تغيير مظهر مؤشر الماوس في CSS

خيارات المؤشر القياسية في CSS

هناك مجموعة واسعة من خيارات المؤشر التي يمكنك ضبطها لاستخدامك في المؤشر. لاحظ أن “N” و “S” و “W” و “E” التي تراها في القائمة تشير إلى الاتجاهات الأساسية للشمال والجنوب والشرق والغرب. على سبيل المثال ، cursor: e-resize; يظهر مقبض تغيير الحجم مع سهم على الجانب “الشرقي” أو الأيمن.

.alias {cursor: alias;}

.all-scroll {cursor: all-scroll;}

.auto {cursor: auto;}

.cell {cursor: cell;}

.context-menu {cursor: context-menu;}

.col-resize {cursor: col-resize;}

.copy {cursor: copy;}

.crosshair {cursor: crosshair;}

.default {cursor: default;}

.e-resize {cursor: e-resize;}

.ew-resize {cursor: ew-resize;}

.grab {cursor: grab;}

.grabbing {cursor: grabbing;}

.help {cursor: help;}

.move {cursor: move;}

.n-resize {cursor: n-resize;}

.ne-resize {cursor: ne-resize;}

.nesw-resize {cursor: nesw-resize;}

.ns-resize {cursor: ns-resize;}

.nw-resize {cursor: nw-resize;}

.nwse-resize {cursor: nwse-resize;}

.no-drop {cursor: no-drop;}

.none {cursor: none;}

.not-allowed {cursor: not-allowed;}

.pointer {cursor: pointer;}

.progress {cursor: progress;}

.row-resize {cursor: row-resize;}

.s-resize {cursor: s-resize;}

.se-resize {cursor: se-resize;}

.sw-resize {cursor: sw-resize;}

.text {cursor: text;}

.url {cursor: url(myBall.cur),auto;}

.w-resize {cursor: w-resize;}

.wait {cursor: wait;}

.zoom-in {cursor: zoom-in;}

.zoom-out {cursor: zoom-out;}

أنشأ كريس كويير ، المعالج وراء CSS-Tricks.com ، رسومات الشعار المبتكرة للمساعدة في إظهار خيارات المؤشر المختلفة في CSS.

استخدام الصور كمؤشر الماوس

مثل العديد من خصائص CSS ، يمكن أن تأخذ خاصية المؤشر سمات عبر مواصفات URL. على سبيل المثال ، سوف تستخدم الفئة أدناه الصورة المرتبطة للمؤشر.

.cursor {cursor: url('path/to/image.png'), auto;}

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

.cursor {cursor: url(cursor.svg), url(path/to/image.png), wait;}

الرسوم المتحركة من أي نوع ، سواء في GIF أو SVG أو PNG ، غير مدعومة من قبل المتصفحات. لكن PNGs الشفافة تعمل في جميع متصفحات الويب الشائعة في السوق اليوم. لا يمكن الاعتماد على SVGs في Firefox ، ولكنها تعمل جيدًا في المتصفحات الأخرى.

افتراضيًا ، سيتم تعيين “النقطة الفعالة” للمؤشر على الزاوية العلوية اليسرى من الصورة. للإشارة إلى “نقطة ساخنة” مختلفة ، حدد زوج إحداثي (X ، Y) في مكالمة المؤشر. سيقوم هذا المثال أدناه بتعيين النقطة الفعالة على أنها (3،3) ، باستخدام الجزء العلوي الأيسر على أنه (0،0).

.cursor {cursor: url(cursor.svg) 3 3, pointer;}

الخلاصة: استخدام هذه السمات

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

DzTech

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