خصوصیت cursor
مثال (خصوصیت cursor)
زمانی که موس روی <span>های مختلف می رود، شکل عادی موس تغییر می کند:
span.crosshair {cursor:crosshair}
span.help {cursor:help}
span.wait {cursor:wait}
خودتان امتحان کنید »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 |
- نوشته شده توسط امیر پهلوان صادق
- بازدید: 10758
دیدگاه‌ها
لطفاً در مورد تغییر کرسر به ایکون مورد نظر بگویید.
باید ایکون چه سایزی داشته باشد؛چه پسوندی داشته باشد؛یک نمونه کد برای بادی لطفا مثال بزنید.
در ضمن سایتتون با سایت استک اور فلو رغابت می کنه.
با استفاده از 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