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

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

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

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

.cursor { cursor: move;}

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

خيارات المؤشر القياسية في 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 القصري على أي موقع ويب. بهذه الطريقة ، يمكنك إظهار المؤشر المخصص الخاص بك متى وأينما تريد.