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 مکان نما از نوع 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 مقدار context-menu برای مکان نما

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

help مقدار help برای ویژگی cursor

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

pointer تصویر نشان دهنده مقدار pointer که شبیه به یک دست می باشد

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

progress تصویر مقدار progress برای ویژگی cursor که یک ساعت شنی در کنار فلش می باشد

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

wait تصویر مقدار wait برای ویژگی cursor که یک ساعت شنی می باشد

این مقدار نشان می دهد که مرورگر مشغول انجام کاری است که کاربر باید تا اتمام آن صبر کند و نمی تواند با سایت تعامل داشته باشد (برعکس مقدار 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.


 

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

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

سوالت رو توی پنل بحث و گفتگو مطرح کن.

3 دیدگاه برای “cursor

  1. سلام اقای سیدی خسته نباشید.
    خواستم بپرسم برای تبدیل psd به html و css دیگه نیازی به نمونه برداری و اسلایس نیست با این همه امکانات ؟

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *