خاصية المؤشر
آخر تحديث: 2026-09-13
cursor خاصية المؤشر
تتحكم خاصية cursor في شكل المؤشر المعروض عند مرور مؤشر الماوس فوق عنصر، وهي إشارة بصرية مهمة للتفاعلية. من خلال اختيار أنواع مؤشرات مختلفة — مثل pointer أو text أو not-allowed — يمكنك إخبار المستخدمين في لمحة ما إذا كان العنصر قابلًا للنقر أو للسحب أو معطّلًا.
| الفئة | |
|---|---|
| القيمة الأولية | auto |
| موروث | نعم |
| ينطبق على | all |
| نوع الحركة | discrete |
| إصدار CSS | CSS2 |
| الحالة | قياسي |
📝 التركيب
cursor: [ [ <url> [ <x> <y> ]? ]# , ]* [ auto | default | none | pointer | text | move | not-allowed | grab | grabbing | progress | wait | help | cell | crosshair | zoom-in | zoom-out | <cursor-keyword> ];⚙️ القيم
| القيمة | النوع | الوصف |
|---|---|---|
auto | default | pointer | text | move | wait | help | not-allowed | grab | grabbing | crosshair | كلمة مفتاحية | نوع مؤشر مُعرّف مسبقًا |
none | كلمة مفتاحية | يُخفي المؤشر |
▶ مثال
عدّل الكود أدناه وشاهد النتيجة المباشرة في الملعب:
🌐 دعم المتصفحات
| المتصفح |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| cursor | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1.2 | ✓ v1 |
| مدعوم في جميع المتصفحات الرئيسية | |||||
تلميح： pointer هي القيمة الأكثر شيوعًا وتدل على أن العنصر قابل للنقر. تؤدي إضافتها صراحةً على عناصر تفاعلية مثل الأزرار والروابط إلى تحسين قابلية الاستخدام.
تلميح： يمكن استخدام صورة مخصصة كمؤشر، على سبيل المثال cursor: url(cur.cur), auto. وفر دائمًا كلمة مفتاحية بديلة.
❓ الأسئلة الشائعة
Qهل استخدام cursor: none لإخفاء مؤشر الماوس فكرة جيدة في CSS؟
Aفي الغالبية العظمى من الحالات، لا يُوصى بإخفاء المؤشر: يفقد المستخدمون الإحساس بالموضع وردود فعل التشغيل، وتتضرر إمكانية الوصول. يناسب فقط حالات خاصة مثل العروض التقديمية بملء الشاشة أو لوحات الألعاب أو المناطق المغطاة بالفعل بمؤشر مخصص. إذا أخفيته، وفر بدائل بلوحة المفاتيح وتجنبه في الصفحات الكثيفة بالنص.
Qما الفرق بين قيمتي المؤشر grab و grabbing؟
Aيعرض grab يدًا مفتوحة ويدل على أن العنصر قابل للسحب، لذلك يُضبط عادةً على مصدر السحب. أما grabbing فيعرض قبضة مغلقة تدل على سحب نشط، ويُفعّل عبر JavaScript أثناء السحب. يوفر الاثنان معًا تغذية راجعة فورية عن الحالة لسحب البطاقات وأشرطة التمرير وغيرها من التفاعلات المدفوعة بالمؤشر.
Qكيف أستخدم صورة مخصصة كمؤشر ماوس في أوراق أنماط CSS؟
Aاكتب cursor: url('cursor.png') 20 10, auto; — تضبط url مسار الصورة، والرقمان هما إحداثيات النقطة الفعالة (حيث يُسجَّل النقر)، و auto الأخيرة هي مؤشر fallback المستخدم إذا فشل تحميل الصورة ويجب إبقاؤها. تفضل ملفات .cur أو .png أو .svg بحجم لا يتجاوز 32×32 لتوافق أفضل عبر المنصات.
Qلماذا يجب على الأزرار والروابط استخدام cursor: pointer في أنماط CSS الخاصة بها؟
Aلا تُظهر الأزرار والروابط دائمًا مؤشر يدٍ افتراضيًا — فبعض المتصفحات تعرض الأزرار بسهم. تؤدي إضافة cursor: pointer صراحةً إلى توصيل دلالة قابلية النقر وتحسين قابلية الاستخدام ومعدلات النقر. لكن لا تُفرط في استخدامه: إضافة pointer إلى نص عادي أو عناصر غير تفاعلية تجعل المستخدمين يظنون أنها قابلة للنقر.
🏷️ خصائص ذات صلة
💡 حالات ذات صلة
📚 دروس ذات صلة
