ویژگی cursor در css | تعیین شکل ظاهری نشانگر موس

در این مقاله از سایت آموزی جهت استفاده شما همراهان گرامی قصد داریم در مورد صفت cursor در زبان css توضیحاتی را ارائه نماییم.

ویژگی cursor در دومین نسخه زبان طراحی css یعنی CSS2 معرفی شده است.

ویژگی cursor در css | تعیین شکل ظاهری نشانگر موس

معرفی ویژگی کاربردی cursor در زبان طراحی css

توسط خاصیت cursor می توانیم شکل ظاهری مکان نما یا نمایشگر موس را در زمانی که موس روی تگ html مورد نظر قرار می گیرد، تعیین نماییم.

مقادیر صفت کاربردی cursor در زبان طراحی سی اس اس

صفت کاربردی cursor که در زبان طراحی CSS2 معرفی شده است، 39 مقدار می پذیرد که عبارتند از:

  1. مقدار alias
  2. مقدار all-scroll
  3. مقدار auto
  4. مقدار cell
  5. مقدار context-menu
  6. مقدار col-resize
  7. مقدار copy
  8. مقدار crosshair
  9. مقدار default
  10. مقدار e-resize
  11. مقدار ew-resize
  12. مقدار grab
  13. مقدار grabbing
  14. مقدار help
  15. مقدار move
  16. مقدار n-resize
  17. مقدار ne-resize
  18. مقدار nesw-resize
  19. مقدار ns-resize
  20. مقدار nw-resize
  21. مقدار nwse-resize
  22. مقدار no-drop
  23. مقدار none
  24. مقدار not-allowed
  25. مقدار pointer
  26. مقدار progress
  27. مقدار row-resize
  28. مقدار s-resize
  29. مقدار se-resize
  30. مقدار sw-resize
  31. مقدار text
  32. مقدار URL
  33. مقدار vertical-text
  34. مقدار w-resize
  35. مقدار wait
  36. مقدار zoom-in
  37. مقدار zoom-out
  38. مقدار initial
  39. مقدار inherit

ویژگی cursor در css | تعیین شکل ظاهری نشانگر موس

مقدار alias درون خاصیت cursor در زبان css

اگر خاصیت cursor را برابر با مقدار alias قرار دهیم، در این صورت شکل ظاهری مکان نما یا نشانگر موس زمانی که بر روی تگ html مربوطه قرار می گیرد، به حالتی تبدیل می شود که نام مستعار می خواهد ایجاد شود.

مثال براساس مقدار alias برای خاصیت cursor

[html]div{cursor: alias;}[/html]

بر روی شکل زیر نشانگر موس خود را حرکت دهید تا با مقدار alias در خاصیت cursor بیشتر آشنا شوید:

ویژگی cursor در css | تعیین شکل ظاهری نشانگر موس

مقدار all-scroll درون خاصیت cursor در زبان سی اس اس

اگر خاصیت cursor را برابر با مقدار all-scroll قرار دهیم، در این صورت شکل ظاهری مکان نما یا نشانگر موس زمانی که بر روی تگ html مربوطه قرار می گیرد، به حالتی تبدیل می شود که در تمام جهات می توان اسکرول انجام داد.

مثال براساس مقدار all-scroll برای خاصیت cursor

[html]div{cursor: all-scroll;}[/html]

بر روی شکل زیر نشانگر موس خود را حرکت دهید تا با مقدار all-scroll در خاصیت cursor بیشتر آشنا شوید:

ویژگی cursor در css | تعیین شکل ظاهری نشانگر موس

مقدار auto درون خاصیت cursor در زبان css

اگر خاصیت cursor را برابر با مقدار auto قرار دهیم، در این صورت شکل ظاهری مکان نما یا نشانگر موس زمانی که بر روی تگ html مربوطه قرار می گیرد، به حالتی تبدیل می شود که مرورگر بر اساس شرایط تگ html مورد نظر شکل مکان نما را تعیین می کند.

مقدار auto به عنوان مقدار پیش فرض صفت cursor می باشد.

مثال براساس مقدار auto برای خاصیت cursor

[html]div{cursor: auto;}[/html]

بر روی شکل زیر نشانگر موس خود را حرکت دهید تا با مقدار auto در خاصیت cursor بیشتر آشنا شوید:

ویژگی cursor در css | تعیین شکل ظاهری نشانگر موس

مقدار cell درون خاصیت cursor در زبان سی اس اس

اگر خاصیت cursor را برابر با مقدار cell قرار دهیم، در این صورت شکل ظاهری مکان نما یا نشانگر موس زمانی که بر روی تگ html مربوطه قرار می گیرد، به حالتی تبدیل می شود که سلول جدول را می توانیم انتخاب کنیم.

مثال براساس مقدار cell برای خاصیت cursor

[html]div{cursor: cell;}[/html]

بر روی شکل زیر نشانگر موس خود را حرکت دهید تا با مقدار cell در خاصیت cursor بیشتر آشنا شوید:

ویژگی cursor در css | تعیین شکل ظاهری نشانگر موس

ویژگی cursor در css | تعیین شکل ظاهری نشانگر موس

مقدار context-menu درون خاصیت cursor در زبان css

اگر خاصیت cursor را برابر با مقدار context-menu قرار دهیم، در این صورت شکل ظاهری مکان نما یا نشانگر موس زمانی که بر روی تگ html مربوطه قرار می گیرد، به حالتی تبدیل می شود که یک منوی گرافیکی در کنار فلش برای نمایش مکان‌ نما وجود خواهد داشت.

نکته مهم

تنها مرورگر IE10 به بالا از مقدار context-menu پشتیبانی می کند. و مرورگرهای معتبری همچون فایرفاکس و اپرا و سافاری این مقدار را در خصوصیت cursor پشتیبانی نمی کنند.

مثال براساس مقدار context-menu برای خاصیت cursor

[html]div{cursor: context-menu;}[/html]

بر روی شکل زیر نشانگر موس خود را حرکت دهید تا با مقدار context-menu در خاصیت cursor بیشتر آشنا شوید: (تنها در IE10 به بالا)

ویژگی cursor در css | تعیین شکل ظاهری نشانگر موس

مقدار col-resize درون خاصیت cursor در زبان سی اس اس

اگر خاصیت cursor را برابر با مقدار col-resize قرار دهیم، در این صورت شکل ظاهری مکان نما یا نشانگر موس زمانی که بر روی تگ html مربوطه قرار می گیرد، به حالتی تبدیل می شود که امکان تغییر اندازه در حالت افقی را نشان می دهد.

مثال براساس مقدار col-resize برای خاصیت cursor

[html]div{cursor: col-resize;}[/html]

بر روی شکل زیر نشانگر موس خود را حرکت دهید تا با مقدار col-resize در خاصیت cursor بیشتر آشنا شوید:

ویژگی cursor در css | تعیین شکل ظاهری نشانگر موس

مقدار copy درون خاصیت cursor در زبان css

اگر خاصیت cursor را برابر با مقدار col-resize قرار دهیم، در این صورت شکل ظاهری مکان نما یا نشانگر موس زمانی که بر روی تگ html مربوطه قرار می گیرد، به حالتی تبدیل می شود که با یک علامت + در بالای نشانگر موس حالت کپی کردن را نمایش می دهد.

مثال براساس مقدار copy برای خاصیت cursor

[html]div{cursor: copy;}[/html]

بر روی شکل زیر نشانگر موس خود را حرکت دهید تا با مقدار copy در خاصیت cursor بیشتر آشنا شوید:

مقدار crosshair درون خاصیت cursor در زبان سی اس اس

اگر خاصیت cursor را برابر با مقدار crosshair قرار دهیم، در این صورت شکل ظاهری مکان نما یا نشانگر موس زمانی که بر روی تگ html مربوطه قرار می گیرد، به حالتی تبدیل می شود که یک تصویر دو بعدی قابلیت انتخاب دارد.

مثال براساس مقدار crosshair برای خاصیت cursor

[html]div{cursor: crosshair;}[/html]

بر روی شکل زیر نشانگر موس خود را حرکت دهید تا با مقدار crosshair در خاصیت cursor بیشتر آشنا شوید:

ویژگی cursor در css | تعیین شکل ظاهری نشانگر موس

مقدار default درون خاصیت cursor در زبان css

اگر خاصیت cursor را برابر با مقدار default قرار دهیم، در این صورت شکل ظاهری مکان نما یا نشانگر موس زمانی که بر روی تگ html مربوطه قرار می گیرد، به حالتی تبدیل می شود که سبک پیش فرض نشانگر موس سیستم عامل بازدیدکننده از سایت ما به نمایش در آید.

مثال براساس مقدار default برای خاصیت cursor

[html]div{cursor: default;}[/html]

بر روی شکل زیر نشانگر موس خود را حرکت دهید تا با مقدار default در خاصیت cursor بیشتر آشنا شوید:

مقدار e-resize درون خاصیت cursor در زبان سی اس اس

اگر خاصیت cursor را برابر با مقدار e-resize قرار دهیم، در این صورت شکل ظاهری مکان نما یا نشانگر موس زمانی که بر روی تگ html مربوطه قرار می گیرد، به حالتی تبدیل می شود که وضعیت تغییر به جهت شرق در نقطه شروع نمایش مکان‌ نما وجود خواهد داشت.

مثال براساس مقدار e-resize برای خاصیت cursor

[html]div{cursor: e-resize;}[/html]

بر روی شکل زیر نشانگر موس خود را حرکت دهید تا با مقدار e-resize در خاصیت cursor بیشتر آشنا شوید:

مقدار initial درون خاصیت cursor در زبان سی اس اس

اگر خاصیت cursor را برابر با مقدار initial تعریف کنیم، در حقیقت همان مقدار پیش فرض این خصوصیت برای تگ html مورد نظر اعمال می شود.

ویژگی cursor در css | تعیین شکل ظاهری نشانگر موس

ویژگی cursor در css | تعیین شکل ظاهری نشانگر موس

بررسی خاصیت cursor از نظر نسخه زبان طراحی سی اس اس

خصوصیت cursor در دومین نسخه زبان طراحی سی اس اس یعنی CSS2 معرفی شده است.

بررسی ساختاری خصوصیت cursor

پشتیبانی مرورگرهای اینترنتی از خاصیت cursor در زبان طراحی css