ویژگی cursor در CSS برای تغییر شکل نشانگر موس روی عناصر مختلف استفاده می‌شود. این قابلیت مخصوصاً در وب‌اپلیکیشن‌ها کاربرد زیادی دارد؛ جایی که کاربر فقط کلیک نمی‌کند و ممکن است عملیات دیگری هم انجام دهد. البته این ویژگی فقط روی دستگاه‌هایی که اشاره‌گر موس دارند کار می‌کند.

.in-progress {
  cursor: progress;
}

انواع Cursor های موجود

اگر روی دسکتاپ یا لپ‌تاپ باشید، می‌توانید انواع مختلف cursor را مشاهده کنید.

Cursor های عمومی و پیش‌فرض

• auto
• default
• none

Cursor لینک

• pointer

Cursor اسکرول

• all-scroll

Cursor وضعیت

• context-menu
• help
• wait
• progress

Cursor انتخاب

• crosshair
• cell
• text
• vertical-text

Cursor کشیدن و رها کردن (Drag & Drop)

• alias
• copy
• move
• no-drop
• not-allowed

Cursor زوم

• zoom-in
• zoom-out

Cursor گرفتن (Grab)

• grab
• grabbing

Cursor تغییر اندازه

• e-resize
• n-resize
• ne-resize
• nw-resize
• s-resize
• se-resize
• sw-resize
• w-resize
• ew-resize
• ns-resize
• nesw-resize
• nwse-resize
• col-resize
• row-resize

Cursor سفارشی (Custom Cursor)

شما می‌توانید cursor سفارشی برای سایت خود تعریف کنید. توجه داشته باشید که همه مرورگرها از فایل‌های svg برای cursor پشتیبانی نمی‌کنند، اما فایل‌های .cur تقریباً در همه مرورگرها پشتیبانی می‌شوند. به همین دلیل بهتر است یک fallback هم تعریف کنید.

همچنین می‌توانید یک cursor پیش‌فرض به عنوان fallback قرار دهید.

تعریف Cursor سفارشی

.custom-cur {
  cursor: url('/images/cloud.svg');
}

استفاده از فایل .cur به عنوان fallback

.custom-cur {
  cursor: url('/images/cloud.svg'),
  url('/images/cloud.cur');
}

تعیین موقعیت Hotspot برای Cursor

می‌توانید مختصات hotspot را مشخص کنید:

.custom-cur {
  cursor: url('/images/cloud.svg') 10 12;
}

استفاده از Cursor پیش‌فرض به عنوان fallback

.custom-cur {
  cursor: url('/images/cloud.svg'),
  move;
}

نکته مهم درباره فایل SVG

وقتی از فایل SVG برای cursor استفاده می‌کنید، باید در تگ اصلی SVG مقدار width و height مشخص شده باشد؛ در غیر این صورت cursor نمایش داده نمی‌شود.

مثال:

پشتیبانی مرورگرها

طبق آمار سال 2020، حدود 80٪ مرورگرها از cursor سفارشی پشتیبانی می‌کنند. بیشتر مرورگرهایی که این قابلیت را ندارند، مرورگرهای موبایل هستند؛ چون دستگاه‌های لمسی اصولاً cursor ندارند.

جمع‌بندی

Cursor های سفارشی معمولاً برای نشان دادن قابل کلیک بودن یک عنصر استفاده می‌شوند، مخصوصاً زمانی که آن عنصر لینک <a> نیست. اما این قابلیت می‌تواند در ساخت وب‌اپلیکیشن‌های حرفه‌ای و تعاملی هم بسیار مفید باشد.

نکاتی که باید در نظر داشته باشید:

• کاربران بیشتر زمان خود را در سایت‌های دیگر می‌گذرانند؛ بنابراین بهتر است از cursor های سفارشی به شکلی استفاده کنید که تجربه کاربری آشنا و استاندارد حفظ شود.
• کاربران موبایل و تبلت، cursor سفارشی را مشاهده نخواهند کرد.