جلسه ی سی ام: خصوصیت Cursor در CSS

 

خصوصیت Cursor

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

خصوصیت Cursor چیست؟

از خصوصیت Cursor برای تغییر شکل ظاهری مکان نما یا همان اشاره گر ماوس ما بر روی عناصر مختلف استفاده می شود. زمانی از این خصوصیت استفاده می کنیم که بخواهیم کاربر خود را از ویژگی های یک عنصر درون وب سایت خود با خبر کنیم.

 

حالت های استاندارد در خصوصیت Cursor

عموما خصوصیت Cursor به دو دسته ی استاندارد و غیر استاندارد تقسیم می شوند که Cursor های استاندارد عبارتند از:

  1. url(”)
  2. auto
  3. crosshair
  4. default
  5. pointer
  6. move
  7. e-resize
  8. ne-resize
  9. nw-resize
  10. n-resize
  11. se-resize
  12. sw-resize
  13. s-resize
  14. w-resize
  15. text
  16. wait
  17. help
  18. progress

 

url(”)

از طریق حالت url(”) می توانیم برای اشاره گر ماوس خود یک عکس به دلخواه خود تعریف نماییم تا پس از قرار گرفتن ماوس بر روی عنصر مورد نظر ما اشاره گر ما به آن عکس تبدیل شود. البته عموما کسی از این ویژگی استفاده نمی کند. به نمونه کد زیر توجه کنید:

  cursor: url('/image/img.jpg');

auto

زمانی که از حالت auto در خصوصیت Cursor استفاده میکنیم اشاره گر یا همان ماوس ما به شکل حرف i بزرگ در انگلیسی تبدیل می شود. معمولا از این ویژگی زمانی استفاده می شود که اشاره گر ماوس ما بر روی یک متن قرار بگیرد. به نمونه کد زیر توجه کنید:

cursor: auto;

نکته: مقدار پیشفرض در این خصوصیت حالت Auto می باشد.

 

Crosshair

زمانی که از حالت crosshair در خصوصیت Cursor استفاده می کنیم اشاره گر ماوس ما به شکل یک علامت مثبت بزرگ تبدیل می شود. مانند زمانی که میخواهیم در نرم افزار paint یا فتوشاپ قسمتی را بریده و جدا کنیم. به نمونه کد زیر توجه کنید:

cursor: crosshair;

default

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

cursor: default;

pointer

زمانی که از حالت pointer استفاده می کنیم اشاره گر ماوس ما شبیه یک دست می شود. برای مثال زمانی که می خواهیم بر روی یک لینک کلیک کنیم اشاره گر ما به این شکل تبدیل می شود. به نمونه کد زیر توجه کنید:

cursor: pointer;

move

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

cursor: move;

حالت های resize از یک جهت

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

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

  1. north: شمال : بالا
  2. south: جنوب : پایین
  3. east: شرق : راست
  4. west: غرب : چپ

و مابین این جهت ها نیز جهت های فرعی می باشند برای مثال جهت شمال شرقی را با ne نشان می دهند. حال به جهت های زیر توجه کنید:

e-resize: در این حالت جهت اشاره گر ما به سمت راست می باشد. به نمونه کد زیر توجه کنید:

cursor: e-resize;

ne-resize: در این حالت اشاره گر ما بین جهت های سمت راست و بالا می باشد. به نمونه کد زیر توجه کنید:

cursor: ne-resize;

nw-resize: در این حالت جهت اشاره گر ما بین جهت های چپ و بالا می باشد. به نمونه کد زیر توجه کنید:

cursor: nw-resize;

n-resize: در این حالت جهت اشاره گر ما به سمت بالا می باشد. به نمونه کد زیر توجه کنید:

cursor: n-resize;

se-resize: در این حالت جهت اشاره گر ما بین جهت های راست و پایین می باشد. به نمونه کد زیر توجه کنید:

cursor: se-resize;

sw-resize: در این حالت جهت اشاره گر ما بین جهت های چپ و پایین می باشد. به نمونه کد زیر توجه کنید:

cursor: sw-resize;

s-resize: در این حالت جهت اشاره گر ما به سمت پایین می باشد. به نمونه کد زیر توجه کنید:

cursor: s-resize;

w-resize: در این حالت جهت اشاره گر ما به سمت چپ می باشد. به نمونه کد زیر توجه کنید:

cursor: w-resize;

text

حالت text دقیقا مانند حالت Auto می باشد در این حالت اشاره گر ما شبیه یک حرف i بزرگ می باشد. به نمونه کد زیر توجه کنید:

cursor: text;

wait

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

cursor: wait;

help

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

cursor: help;

progress

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

cursor: progress;

حالت های غیر استاندارد در خصوصیت Cursor

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

  1. all-scroll
  2. col-resize
  3. row-resize
  4. no-drop
  5. not-allowed
  6. vertical-text

 

all-scroll

حالت all-scroll در خصوصیت Cursor به کاربر این امکان را نمایش می دهند که امکان اسکرول کردن عنصر مورد نظر در تمامی جهات وجود دارد. به نمونه کد زیر توجه کنید:

cursor: all-scroll;

col-resize

حالت col-resize به ما این امکان را می دهد که به کاربر نشان دهیم امکان تغییر اندازه ی عنصر در جهت افقی وجود دارد. در این حالت اشاره گر پس از قرار گرفتن بر روی عنصر مورد نظر مانند دو خط موازی که از سمت چپ و راست دارای فلش هستند می شود. به نمونه کد زیر توجه کنید:

cursor: col-resize;

row-resize

حالت row-resize به ما این امکان را می دهد که به کاربر نشان دهیم امکان تغییر اندازه ی عنصر در جهت عمودی وجود دارد. در این حالت اشاره گر پس از قرار گرفتن بر روی عنصر مورد نظر مانند دو خط موازی که از سمت بالا و پایین دارای فلش هستند تبدیل می شود. به نمونه کد زیر توجه کنید:

cursor: row-resize;

no-drop

حالت no-drop از خصوصیت Cursor به این معنی می باشد که شما نمی توانید عنصر مورد نظر خود را در این قسمت قرار دهید. شکل ظاهری این حالت به این گونه است که پس از قرار گرفتن اشاره گر بر روی عنصر مورد نظرما به شکل علامت ممنوعیت مبدل می شود. به نمونه کد زیر توجه کنید:

cursor: no-drop;

not-allowed

حالت not-allowed به این معنا می باشد که شما نمی توانید عملیات مورد نظر را انجام دهید و یا به عنصر مورد نظر خود دسترسی داشته باشید. شکل ظاهری این حالت به این گونه است که پس از قرار گرفتن اشاره گر بر روی عنصر مورد نظرما به شکل علامت ممنوعیت مبدل می شود. به نمونه کد زیر توجه کنید:

cursor: not-allowed;

vertical-text

حالت vertical-text مانند حالت text می باشد با این تفاوت که علامت مورد نظر ما در حالت عمودی می باشد نه افقی. به نمونه کد زیر توجه کنید:

cursor: vertical-text;

خروجی تمام نمونه کد های بالا:

خصوصیت Cursor

 

خلاصه مطلب:

  1. از خصوصیت Cursor برای تغییر شکل ظاهری مکان نما یا همان اشاره گر ماوس ما بر روی عناصر مختلف استفاده می شود.
  2. از طریق حالت url(”) می توانیم برای اشاره گر ماوس خود یک عکس به دلخواه خود تعریف نماییم.
  3. زمانی که از حالت auto در خصوصیت Cursor استفاده میکنیم اشاره گر یا همان ماوس ما به شکل حرف i بزرگ در انگلیسی تبدیل می شود.
  4. زمانی که از حالت crosshair در خصوصیت Cursor استفاده می کنیم اشاره گر ماوس ما به شکل یک علامت مثبت بزرگ تبدیل می شود.
  5. حالت default از خصوصیت Cursor همان شکل عادی ماوس ما می باشد.
  6. زمانی که از حالت pointer استفاده می کنیم اشاره گر ماوس ما شبیه یک دست می شود.
  7. با استفاده از حالت move می توانیم نشان دهیم که عنصر ما قابل حر کت می باشد.
  8. به طور کلی در حالت resize از خصوصیت Cursor ما می توانیم به کاربر نشان دهیم که عنصر مورد نظر ما از یک جهت خاص قابل افزایش اندازه می باشد.
  9. حالت text دقیقا مانند حالت Auto می باشد در این حالت اشاره گر ما شبیه یک حرف i بزرگ می باشد.
  10. حالت wait از خصوصیت Crusor برای نشان دادن انتظار به کاربر استفاده می شود.
  11. حالت help از خصوصیت Cursor برای نشان دادن وجود کمک برای کاربر می باشد.
  12. حالت progress تلفیقی از حالات default و wait می باشد. این حالت برای نشان دادن پردازش یک عملیات برای کاربر می باشد.
  13. حالت all-scroll در خصوصیت Cursor به کاربر این امکان را نمایش می دهند که امکان اسکرول کردن عنصر مورد نظر در تمامی جهات وجود دارد.
  14. حالت col-resize به ما این امکان را می دهد که به کاربر نشان دهیم امکان تغییر اندازه ی عنصر در جهت افقی وجود دارد.
  15. حالت row-resize به ما این امکان را می دهد که به کاربر نشان دهیم امکان تغییر اندازه ی عنصر در جهت عمودی وجود دارد.
  16. حالت no-drop از خصوصیت Cursor به این معنی می باشد که شما نمی توانید عنصر مورد نظر خود را در این قسمت قرار دهید.
  17. حالت not-allowed به این معنا می باشد که شما نمی توانید عملیات مورد نظر را انجام دهید و یا به عنصر مورد نظر خود دسترسی داشته باشید.
  18. حالت vertical-text مانند حالت text می باشد با این تفاوت که علامت مورد نظر ما در حالت عمودی می باشد نه افقی.
ابوالفضل کلهری

فعال در زمینه های ui و ux و طراحی وب سایت مسلط به زبان های نشانه گذاری HTML و CSS و همچنین در زمینه ی آموزش زبان های HTML و CSS نیز فعالیت دارم . امیدوارم با آموزش هایی که در این سایت قرار می دهم موجب پیشرفت شما عزیزان باشم.

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