خصوصیت cursor

مثال (خصوصیت cursor)

زمانی که موس روی <span>های مختلف می رود، شکل عادی موس تغییر می کند:

span.crosshair {cursor:crosshair}
span.help {cursor:help}
span.wait {cursor:wait}

تعریف و کاربرد

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

مقدار پیشفرض	auto
ارث بری	بله
نسخه	CSS2
JavaScript ساختار	object.style.cursor="crosshair"

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

تمام مرورگرهای اصلی، خصوصیت cursor را پشتیبانی می کنند.

توجه: مرورگر Internet Explorer 7 و نسخه های قبلی آن، مقدار "inherit" را پشتیبانی نمی کند. IE8 به !DOCTYPE! نیاز دارد. IE9 مقدار "inherit" را پشتیبانی می کند.

مقدارهای خصوصیت

مقدار	نمایش دادن
alias	نمایش دادن »
all-scroll	نمایش دادن »
auto	نمایش دادن »
cell	نمایش دادن »
context-menu	نمایش دادن »
col-resize	نمایش دادن »
copy	نمایش دادن »
crosshair	نمایش دادن »
default	نمایش دادن »
e-resize	نمایش دادن »
ew-resize	نمایش دادن »
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	نمایش دادن »
inherit

: نوشته شده توسط امیر پهلوان صادق; بازدید: 10501

برای درج دیدگاه، ابتدا باید وارد بیاموز شوید.

دیدگاه‌ها

+2 # امیرکیان

لطفاً در مورد تغییر کرسر به ایکون مورد نظر بگویید.
باید ایکون چه سایزی داشته باشد؛چه پسوندی داشته باشد؛یک نمونه کد برای بادی لطفا مثال بزنید.

در ضمن سایتتون با سایت استک اور فلو رغابت می کنه.

+1 # امیر پهلوان صادق

با استفاده از JavaScript به زیبایی می توانید این کار را انجام دهید: var elementToChange = document.getEle mentsByTagName( "body")[0];
elementToChange .style.cursor = "url('cursor url with protocol'), auto";
یا از طریق Jquery:$("html").css("cursor: url('/cursor url with protocol'), auto");
لطفاً به مثال زیر توجه فرمایید:
beyamooz.com/try_it_yourself/tryit.php?filename=trycss_cursor01

بازآوری فهرست دیدگاه‌ها

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.

مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی