انتقل إلى محتوى الدرس

Standard UI Cursor Keywords دلالات أشكال مؤشر الفأرة القياسية

تحكم في تفاعل واجهة المستخدم في CSS عبر دلالات أشكال مؤشر الفأرة وتمرير النقرات بخاصية pointer-events وتنظيم تحديد النصوص وتقييد تحجيم الحقول بأمان.
3 صفوف تعليمية
لغة CSS
0 مشاهدة

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

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

تشمل أهم القيم القياسية pointer لشكل اليد على الأزرار القابلة للنقر، و not-allowed لدائرة المنع فوق عنصر معطل مثل .btn-disabled، و grab مع grabbing لليد المفتوحة والمقبوضة عند سحب البطاقات، و text لمؤشر الكتابة، و zoom-in لعدسة التكبير، و wait للانتظار، و help لعلامة الاستفهام الإرشادية.

الصف 2 صورة توضيحية
مخطط خصائص مؤشر الفأرة وتمرير النقرات وتحديد النصوص والتحجيم في واجهة المستخدم
الصف 3 كود برمجي
CSS
.btn-action { cursor: pointer; }
.btn-disabled { cursor: not-allowed; opacity: 0.6; }
.drag-card { cursor: grab; }
.drag-card:active { cursor: grabbing; }
.zoom-thumb { cursor: zoom-in; }
.term-hint { cursor: help; }