cursor

از ویژگی 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>

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

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

در مثال بالا اگر مرورگر قادر به نمایش تصویر name.png باشد مختصات دقیق مکان‌نما را 12 پیکسل فاصله از لبه سمت چپ تصویر و 27 پیکسل فاصله از لبه بالای تصویر قرار می دهد. اگر هم نتواند تصویر را بارگزاری کند در نتیجه مقدار 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 را با مختصات تعیین شده 2 و 3 نمایش می دهد. اگر آن تصویر هم در دسترس نباشد در نهایت مرورگر pointer را به عنوان مقدار این ویژگی لحاظ می کند.

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

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

 

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

 

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

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