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

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

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

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

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

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

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

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

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

مقدار alias
مقدار all-scroll
مقدار auto
مقدار cell
مقدار context-menu
مقدار col-resize
مقدار copy
مقدار crosshair
مقدار default
مقدار e-resize
مقدار ew-resize
مقدار grab
مقدار grabbing
مقدار help
مقدار move
مقدار n-resize
مقدار ne-resize
مقدار nesw-resize
مقدار ns-resize
مقدار nw-resize
مقدار nwse-resize
مقدار no-drop
مقدار none
مقدار not-allowed
مقدار pointer
مقدار progress
مقدار row-resize
مقدار s-resize
مقدار se-resize
مقدار sw-resize
مقدار text
مقدار URL
مقدار vertical-text
مقدار w-resize
مقدار wait
مقدار zoom-in
مقدار zoom-out
مقدار initial
مقدار 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 | تعیین شکل ظاهری نشانگر موس

مقدار 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 به بالا)

مقدار 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 از نظر نسخه زبان طراحی سی اس اس

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

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


عناوین ساختاری خاصیت cursor	وضعیت ساختاری خاصیت cursor
مقدار پیش فرض	auto
قابلیت توارث	دارد
قابلیت تحرک	ندارد
ورژن css صفت	CSS2
سینتکس صفت در جاوا اسکریپت	"object.style.cursor="crosshair