cursor-*

شكل المؤشّر cursor-*

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

مؤشّر الفأرة إشارة تفاعل صامتة لكنها فعّالة: cursor-pointer (يد) يقول «هذا قابل للنقر»، وcursor-not-allowed (دائرة مشطوبة) يقول «هذا معطّل حاليًّا»، وcursor-wait يخبر المستخدم أن هناك عملية جارية. استخدامها الصحيح يقلّل الالتباس، خصوصًا على عناصر لا تبدو تفاعلية بصريًّا (مثل div بمعالج نقر) لكنها فعلًا قابلة للنقر.

ملاحظة مهمّة: أزرار <button> الحقيقية لا تحتاج cursor-pointer عادةً لأن المتصفح يعرضها تلقائيًّا بمؤشّر مناسب في أغلب الأحيان حسب نظام التشغيل، لكن العناصر غير الدلالية (div، span) بمعالجات نقر تحتاجه فعليًّا لتبدو تفاعلية.

الصياغة

class="cursor-pointer"      /* عنصر قابل للنقر */
class="cursor-not-allowed"  /* عنصر معطّل */

⚡ جرّب بنفسك

عدّل الكود واضغط «تحديث» لترى النتيجة فورًا — التجربة أفضل معلّم.

🎨 محرّر HTML/CSS

<script src="https://cdn.tailwindcss.com"></script>
<div class="flex gap-3 p-4">
  <button class="cursor-pointer rounded-lg bg-purple-600 px-4 py-2 text-white">نشط</button>
  <button disabled class="cursor-not-allowed rounded-lg bg-gray-300 px-4 py-2 text-gray-500">معطّل</button>
</div>

النتيجة المباشرة:

أهم القيم

القيمة	الوظيفة
cursor-pointer	يد — عنصر قابل للنقر
cursor-not-allowed	دائرة مشطوبة — معطّل
cursor-wait / cursor-progress	عملية جارية
cursor-grab	قابل للسحب
cursor-default	المؤشّر العادي — لا تفاعل خاص

💡 نصائح عملية

استخدم disabled:cursor-not-allowed على الأزرار المعطّلة بدل ضبطه يدويًّا — يتفعّل تلقائيًّا مع خاصّية disabled
على عناصر div أو span بمعالج نقر (onClick)، لا تنسَ cursor-pointer — المتصفح لا يضيفه تلقائيًّا لها

⚠️ أخطاء شائعة

نسيان cursor-pointer على عناصر غير <button>/<a> تحتوي معالج نقر — تبدو غير تفاعلية للمستخدم رغم أنها كذلك
استخدام cursor-pointer على نصّ عادي غير قابل للنقر — يوهم المستخدم بتفاعل غير موجود

خصائص ذات صلة

accent-* لون عناصر النموذج الأصلية

🎓 تريد فهم الصورة الكاملة خطوة بخطوة؟ ابدأ من مسار TAILWIND الكامل بالعربي.

📚 للتعمق التقني الكامل بالإنجليزية: MDN Web Docs