cursor
خاصية شكل المؤشر cursor
خاصية cursor تغيّر شكل مؤشر الفأرة فوق العنصر — pointer «اليد» إشارة القابلية للنقر التي يفهمها الجميع غريزيًا.
لغة إشارات صامتة يقرؤها كل مستخدم: اليد pointer تقول «انقرني»، وnot-allowed ترفض، وgrab تعرض السحب، وwait/progress تطلب الصبر. الروابط والأزرار الحقيقية تأتي باليد مجانًا — لكن كل عنصر «صنعته قابلًا للنقر» بنفسك (بطاقة، summary أكورديون، صف جدول) عليك إعلانها يدويًا: cursor: pointer — التفاتة صغيرة تفصل الواجهة المتقنة (لاحظها على أكورديونات هذا الموقع).
الصياغة
.card-clickable { cursor: pointer; }
.disabled { cursor: not-allowed; }⚡ جرّب بنفسك
عدّل الكود واضغط «تحديث» لترى النتيجة فورًا — التجربة أفضل معلّم.
🎨 محرّر HTML/CSS
<style>
.c { display: inline-block; background: #ede9fe; padding: 12px 16px; border-radius: 10px; margin: 4px; font-size: 14px; }
</style>
<span class="c" style="cursor:pointer">pointer — يد النقر</span>
<span class="c" style="cursor:not-allowed">not-allowed — ممنوع</span>
<span class="c" style="cursor:grab">grab — اسحبني</span>
<span class="c" style="cursor:wait">wait — انتظار</span>النتيجة المباشرة:
أهم القيم
| القيمة | الوظيفة |
|---|---|
| pointer | اليد — على كل قابل للنقر ليس رابطًا/زرًا أصلًا |
| not-allowed | الرفض — عناصر معطلة (مع opacity) |
| grab / grabbing | ثنائي السحب والإفلات |
| text / wait / help | تحديد نص، انتظار، مساعدة — كل سياق إشارته |
💡 نصائح عملية
- قابل للنقر صنعته بنفسك (div بطاقة، summary)؟ pointer عليه إلزامي
- زر معطل: not-allowed + opacity معًا — رسالة بصرية مزدوجة
⚠️ أخطاء شائعة
- بطاقات قابلة للنقر بمؤشر سهم عادي — الزائر لا يعرف أنها تفاعلية
- pointer على غير القابل للنقر — وعد كاذب يحبط النقرات
خصائص ذات صلة
🎓 تريد فهم الصورة الكاملة خطوة بخطوة؟ ابدأ من مسار CSS الكامل بالعربي.
📚 للتعمق التقني الكامل بالإنجليزية: MDN Web Docs