المؤشرات Cursors

تغيير مظهر المؤشر

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

مثال

تشغيل

h1 {
cursor: move;
}
p {
cursor: text;
}

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

القيمة	مثال	المخرجات
`default`	`a:hover{cursor:default;}`	إختبر المؤشر
`pointer`	`a:hover{cursor:pointer;}`	إختبر المؤشر
`text`	`a:hover{cursor:text;}`	إختبر المؤشر
`wait`	`a:hover{cursor:wait;}`	إختبر المؤشر
`help`	`a:hover{cursor:help;}`	إختبر المؤشر
`progress`	`a:hover{cursor:progress;}`	إختبر المؤشر
`crosshair`	`a:hover{cursor:crosshair;}`	إختبر المؤشر
`move`	`a:hover{cursor:move;}`	إختبر المؤشر
`url()`	`a:hover{cursor:url("custom.cur"), default;}`	إختبر المؤشر

إنشاء مؤشر مخصص

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

ملاحظة:

التنسيق القياسي الذي يمكن استخدامه للمؤشرات هو تنسيق .cur ومع ذلك ، يمكنك تحويل الصور مثل .jpg و .gif إلى تنسيق .cur باستخدام برنامج محول الصور المتاح مجانًا عبر الإنترنت.

مثال

تشغيل

a {
cursor: cursor: url("custom.gif"), url("custom.cur"), default;
}

في المثال أعلاه ، تكون custom.gif و custom.cur هي ملفات المؤشر المخصص ، الذي تم تحميلها إلى الخادم لديك ، والافتراضي هو المؤشر العام الذي سيتم استخدامه إذا كان المؤشر المخصص مفقودًا ، أو غير مدعوم من قبل متصفح الويب للمستخدم.

هنا مثال حي لمؤشر مخصص.

قم بتمرير مؤشر الماوس فوق هذا الرابط للكشف عن شكل المؤشر المخصص