این آموزش در تاریخ ۱۴۰۰/۱۱/۰۵ آپدیت شده است.
آموزش ویژگی cursor در CSS
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش ویژگی cursor در CSS با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
ویژگی cursor در CSS
با استفاده از ویژگی cursor در CSS میتوان شکل شمایل / استایل اشاره گر ماوس را هنگام قرار گرفتن بروی یک تگ مشخص کرد.
بفرض مثال بصورت پیش فرض، وقتی ماوس بروی یک لینک قرار میگیرد شکل / استایل اشاره گر ماوس به یک دست
تبدیل می شود، حال دقیقا ما با استفاده از ویژگی cursor میتوانیم شکل شمایل ماوس رو به دلخواه خودمون مشخص کنیم.
شکل / آیکون اشاره گر ماوس ممکن است در سیستم های مختلف با پوسته / تِم / Theme های مختلف ، یه کوچولو شکلش متفاوت باشه
برای حفظ ظاهر استاندارد تگ ها ، لینک ها و.. سعی کنید از استایل های مناسب در مکان های مناسب استفاده نمایید و از استفاده بی جهت و بی ربط خودداری نمایید.
Free-Learn
مثال از این ویژگی
در ادامه میتوانید یک مثال از ویژگی cursor را در زبان CSS مشاهده نمایید، در مثال زیر مجموعه ای از استایل های اشاره گر ماوس را میتوانید مشاهده نمایید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<style> .all-scroll {cursor: all-scroll;} .cell {cursor: cell;} .col-resize {cursor: col-resize;} .copy {cursor: copy;} .e-resize {cursor: e-resize;} .grab {cursor: grab;} .grabbing {cursor: grabbing;} .help {cursor: help;} .move {cursor: move;} .n-resize {cursor: n-resize;} .nesw-resize {cursor: nesw-resize;} .nwse-resize {cursor: nwse-resize;} .no-drop {cursor: no-drop;} .none {cursor: none;} .not-allowed {cursor: not-allowed;} .pointer {cursor: pointer;} .progress {cursor: progress;} .row-resize {cursor: row-resize;} .s-resize {cursor: s-resize;} .se-resize {cursor: se-resize;} .sw-resize {cursor: sw-resize;} .text {cursor: text;} .w-resize {cursor: w-resize;} .wait {cursor: wait;} .zoom-in {cursor: zoom-in;} .zoom-out {cursor: zoom-out;} </style> |
مثال شماره ۲ : تغییر شکل ماوس به فایل تصویر دلخواه ( مثلا من یه تصویر دارم میخوام اون به عنوان اشاره گر ماوس انتخاب بشه )
|
1 2 3 |
.MyBox{ cursor: url("files/my-cursor.png"), auto; } |
Free-Learn
جدول مشخصات ویژگی cursor در CSS
در جدول زیر میتوانید مشخصات کلی این ویژگی را در زبان CSS مشاهده نمایید.
| مقدار پیش فرض | auto |
|---|---|
| قابل ارث بری | دارد | اطلاعات بیشتر |
| قابل متحرک سازی | ندارد | اطلاعات بیشتر |
| نسخه | CSS2 |
| نحوه استفاده در جاوااسکریپت | object.style.cursor=”pointer”; |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از ویژگی cursor در CSS پشتیبانی میکنند یا خیر.
| نام ویژگی | Chrome | Firefox | Opera | Safari | Edge |
| cursor | بله | بله | بله | بله | بله |
Free-Learn
شکل نوشتاری
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این ویژگی در CSS بصورت زیر می باشد.
|
1 |
cursor: یکی از مقادیر موجود در جدول مقادیر; |
Free-Learn
جدول مقادیر ویژگی cursor در CSS
در جدول زیر میتوانید، مقادیری را که میتوان در این ویژگی استفاده کرد مشاهده نمایید.
| مقدار | توضیح |
|---|---|
| auto | پیش فرض – اشاره گر ماوس توسط مرورگرها مشخص میشود |
| alias | ماوس رو بیار روی من تا شکلش رو ببینی |
| all-scroll | ماوس رو بیار روی من تا شکلش رو ببینی |
| 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 | استفاده از مقدار پدر یا والد ( به ارث بری ) | اطلاعات بیشتر |
Free-Learn
نکات و توضیحات
- همانطور که در مثال شماره ۲ مشاهده مینمایید، ما میتوانیم با استفاده از مقدار URL در ویژگی cursor از فایل تصویر / یا آیکون اشاره گر دلخواه استفاده نماییم، میتوان بیش از ۱ عدد فایل دلخواه نیز استفاده کرد، فقط باید با استفاده از کاما اونارو از همدیگه جدا کرد.
|
1 |
cursor: url(one.png), url(two.png); |
- برای فایل اشاره گر ماوس میتوانید از فرمت های png , jpg , svg , cur و.. استفاده نمایید
- همچنین سعی کنید حتما علاوه بر فایل دلخواه ، از یه مقدار جایگزین هم استفاده نمایید تا اگر موقعی مشکلی در نمایش فایل دلخواه به وجود اومد اشاره گر ماوس بتواند از گزینه جایگزین استفاده نماید. مثال :
|
1 |
cursor: url(one.png), url(two.png) , pointer; |
