از ویژگی cursor جهت مشخص کردن شکل ظاهری مکان‌نما (نشانگر موس) در زمانی که بر روی یک عنصر قرار می‌گیرد بهره بری و استفاده می‌می شود.

با بهره بری و استفاده از آن ویژگی می قدرت ظاهر مکان‌نما را به اشکال گوناگونی تغییر داد و همچنین یا حتی می قدرت یک تصویر خاص جهت آن هم مشخص کردن کرد.

کاربرد ویژگی cursor زمانی می باشد که ما بخواهیم کاربر را از عملکرد یک عنصر با خبر کنیم، مثلا فرض کنید مکان‌نما روی عنصری قرار می‌گیرد و همچنین ظاهر آن هم به شکل دست تغییر می‌کند، آن نشان دهنده آن می باشد که آن هم عنصر قابل کلیک شدن می باشد و همچنین می تواند یک دکمه یا لینک باشد.

توجه داشته باشید که اشکال موجود جهت آن ویژگی امکان دارد در مرورگرها و همچنین سیستم عامل های متنوع و گوناگون و مختلف متغایر و متفاوت دیدن کردن و نمایش داده می شود، پس حتما خروجی کار را در شرایط متنوع و گوناگون و مختلف بررسی کردن کنید. البته در صورتی که آن موضوع جهت کاربران تو حیاتی می باشد می توانید از یک تصویر بهره بری و استفاده کنید تا دیگر در همه جا یکسان دیدن کردن و نمایش داده می شود.

سینتکس و همچنین مقادیر آن ویژگی بصورت زیر می باشد:

/* Keyword values */
cursor: [ [<url> [<x> <y>]?,]* [ auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | grab | grabbing | 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 | all-scroll | zoom-in | zoom-out ] ]

cursor: pointer;
cursor: auto;


/* URL, with a keyword fallback */
cursor: url(hand.cur), pointer;

/* URL and coordinates, with a keyword fallback */
cursor: url(cursor1.png) 4 12, auto;
cursor: url(cursor2.png) 2 2, pointer;

/* Global values */
cursor: inherit;
cursor: initial;
cursor: unset;

/* Global values */
cursor: inherit;
cursor: initial;
cursor: unset;

در ادامه مقادیر ویژگی cursor بصورت دسته بندی شده شرح داده می شوند:

عمومی

auto

auto مقدار ابتدایی و اولیه جهت آن ویژگی می باشد که باعث می می شود نرم افزار مرورگر اینترنتی بر اساس شرایط عنصری که مکان‌نما بر روی آن هم قرار داد شکل مورد نظر را به مکان‌نما بدهد. مثلا هنگام و زمانی که روی عنصری با محتوای متن هستیم مکان‌نما به شکل مورد نظر تغییر می کند.

default

با آن مقدار مکان‌نما به شکل مکان‌نمای پیشفرض سیستم عاملی که کاربر با آن هم وبسایت و مرکز خبرهای جدید ما را دیدن می کند در می آید که معمولا به شکل فلش می باشد.

.element 
cursor: default;

none

با آن مقدار هیچ مکان‌نمایی جهت عنصر مورد نظر دیدن کردن و نمایش داده نخواهد شد.

تصویر

<uri>

جهت cursor می قدرت تصویر نیز مشخص کردن کرد، کافی می باشد یک یا چند آدرس تصویر را با بهره بری و استفاده از ویرگول از هم جدا کرده و همچنین در آخر یک مقدار از مقادیر دیگر مرتبط به آن ویژگی را قرار داد. در آن صورت نرم افزار مرورگر اینترنتی تلاش می کند تا تصویر مشخص کردن شده اول را به عنوان مکان‌نما جهت عنصر دیدن کردن و نمایش دهد در صورتی که به هر دلیلی قادر به آن کار نباشد به تصویر دوم رفت و آمد و مراجعه می کند و همچنین در صورتی که باز هم آن امکان برایش وجود نداشته باشد مقدار آخر را به عنوان مکان‌نما عنصر در نظر می گیرد. در پس نتیجه آن می شود که می قدرت مقادیر پشتیان جهت آن ویژگی مشخص کردن کرد.

.element 
cursor: url(1.png), url(2.png), url(example.svg#linkcursor), url(example-2.cur), auto;

<x> <y>

هر کدام یک مقدار مثبت کمتر از ۳۲ می باشد که مشخص کردن کننده مکان دقیق مکان‌نما نسبت به گوشه بالا و همچنین سمت چپ تصویر مشخص کردن شده می باشد. مشخص کردن آن مقادیر اجباری نیست و همچنین در صورتی که نوشته نشوند نرم افزار مرورگر اینترنتی آن مختصات را از فایل تصویر می خواند (در صورتی که فایل تصویر از نوع CUR یا XBM باشد) و همچنین در غیر آن صورت مختصات برابر با گوشه بالا سمت چپ تصویر خواهد بود.

.element 
cursor: url(name.png), 12 27, auto;

در مثال بالا در صورتی که نرم افزار مرورگر اینترنتی قادر به دیدن کردن و نمایش تصویر name.png باشد مختصات دقیق مکان‌نما را ۱۲ پیکسل فاصله از لبه سمت چپ تصویر و همچنین ۲۷ پیکسل فاصله از لبه بالای تصویر قرار می دهد. در صورتی که هم نتواند تصویر را بارگزاری کند در پس نتیجه آن می شود که مقدار cursor را برابر با auto در نظر می گیرد.

لینک‌ها و همچنین اوضاع‌ها

context-menu

یک منوی گرافیکی در کنار فلش جهت دیدن کردن و نمایش مکان‌نما وجود خواهد داشت. (در زمان نوشتن آن مطلب تنها IE10 به بالا آن مورد را پیاده سازی کرده اند)

help

آن ویژگی باعث می می شود تا معمولا مکان‌نما جهت عنصر مورد نظر به شکل علامت سوال یا بادكنك دیدن کردن و نمایش داده می شود.

pointer

مکان‌نما طوری دیدن کردن و نمایش داده می می شود که مشخص کند عنصر مربوطه قابل تعامل می باشد (مثل یک لینک) و همچنین معمولا به شکل دست خواهد بود.

progress

آن مقدار مشخص کردن کننده آن می باشد که نرم افزار مرورگر اینترنتی در حال انجام عملیاتی در پس باره می باشد ولی باید توجه داشت کاربر می تواند همچنان با وبسایت و مرکز خبرهای جدید در تعامل باشد.

wait

آن مقدار نشان می دهد که نرم افزار مرورگر اینترنتی مشغول انجام کاری می باشد که کاربر بایستی و حتما تا اتمام آن هم صبر کند و همچنین نمی تواند با وبسایت و مرکز خبرهای جدید تعامل داشته باشد (برعکس مقدار progress)

انتخاب کردن

cell

آن مقدار نشان می دهد که سلول جدول می تواند انتخاب می شود.

crosshair

نشان دهنده حالت انتخاب یک بیتمپ (تصویر) دو بعدی می باشد.

text

نشان دهنده حالت انتخاب متن می باشد.

vertical-text

نشان دهنده حالت انتخاب متن عمودی می باشد.

کشیدن و همچنین رهاکردن

alias

نشان دهنده آن می باشد که می قدرت یک مستعار یا میانبری جهت عنصر موجود بوجود آورد.

copy

با بهره بری و استفاده از آن مقدار می قدرت مشخص کرد که عنصر می تواند کپی می شود.

move

با بهره بری و استفاده از آن مقدار می قدرت مشخص کرد که عنصر می تواند تغییر مکان داده می شود.

no-drop

نشان می دهد که آیتم نمی تواند روی عنصر مورد نظر رها می شود.

not-allowed

نشان می دهد که یک عملیات نمی تواند انجام قبول کند.

all-scroll

امکان اسکرول در تمامی جهت‌ها وجود داد.

col-resize

امکان تغییر مقدار و اندازه در جهت افقی وجود دارد.

row-resize

امکان تغییر مقدار و اندازه در جهت عمودی وجود دارد.

در ادامه مقادیری که نشان دهنده تغییر مکان لبه ها خواهند بود را دیدن خواهیم کرد، توجه داشته باشید کلمات north، south، east و همچنین west به ترتیب برابر شرق، جنوب، شمال و همچنین غرب می باشند پس در پس نتیجه آن می شود که به عنوان مثال ne نشان دهنده شمال شرقی می باشد که در اینجا به آن معنی می باشد که انجام عملیات تغییر مکان یا مقدار و اندازه از سمت شمال شرقی شروع می می شود. در بعضی محیط ها بعضی از آن مقدایر خروجی یکسانی را دیدن کردن و نمایش می دهند:

n-resize

e-resize

s-resize

w-resize

ne-resize

nw-resize

se-resize

sw-resize

همچنین مقادیر زیر امکان تغییر مقدار و اندازه دوجهته را دیدن کردن و نمایش می دهند:

ew-resize

ns-resize

nesw-resize

nwse-resize

بزرگنمایی یا زوم کردن

مقادیر نشان دهنده تغییر بزرگنمایی و همچنین زوم:

zoom-in

zoom-out

گرفتن

مقادیر نشان دهنده حالت گرفتن و همچنین یا گرفتن و همچنین کشیدن آیتم:

grab

grabbing

مثال

به عنوان نمونه در مثال زیر به کاربر کمک می کنیم تا متوجه می شود امکان عمیات مورد نظر بر روی عنصر inputی که غیر فعال می باشد وجود ندارد:

input[disabled] 
cursor: not-allowed;
background-color: rgba(255, 0, 0, 0.2);
/* ... */

همچنین در مثال زیر تمام لینک ها چه بازدید شده باشند چه نه، بایستی و حتما مکان نمای مورد نظر را داشته باشند:

:link,
:visited 
cursor: url(example.svg#linkcursor),
url(hyper.cur),
url(hyper.png) 2 3,
pointer

در آن مثال نرم افزار مرورگر اینترنتی سعی بر بهره بری و استفاده از مکان نمای مشخص کردن شده از نوع SVG می کند و همچنین در صورتی که آن هم نرم افزار مرورگر اینترنتی فرمت SVG را پشتیبانی نکند به سراغ گزینه دوم خواهد رفت و همچنین در صورتی که در دیدن کردن و نمایش آن هم هم مشکل داشته باشد تصویر نهایی یعنی hyper.png را با مختصات مشخص کردن شده ۲ و همچنین ۳ دیدن کردن و نمایش می دهد. در صورتی که آن هم تصویر هم در دسترس نباشد در نهایت نرم افزار مرورگر اینترنتی pointer را به عنوان مقدار آن ویژگی لحاظ می کند.

روش های غیره ای هم جهت فراخوانی تصاویر جهت آن ویژگی می باشد که می توانید آن هم را در آن دمو بررسی کردن کنید.

همچنین در دموی زیر تمامی مقادیر ویژگی cursor را می توانید بررسی کردن کنید:

See the Pen CSS Cursors by Mojtaba Seyedi (@seyedi) on CodePen.

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

بررسی کردن بهتر پشتیبانی مرورگرها را در مورد هر یک از مقادیر را می توانید در وبسایت و مرکز خبرهای جدید موزیلا انجام دهید.