ویژگی cursor در CSS

cursor Property

ویژگی cursor در CSS، شکلِ نشانگر ماوس را مشخص می کند و زمانی نمایش داده می شود که نشانگر بر روی عنصر مورد نظر قرار گیرد.

نحوه نوشتار

cursor: pointer;
cursor: auto;
cursor: url(rocket.cur), pointer;

زمانی که نشانگر ماوس بر روی عنصری خاص یا صفحه ای از وبسایت قرار گیرد می توان توسط ویژگی cursor تعیین کرد که نشانگر ماوس به چه شکلی درآید. معمولا این ویژگی برای تعامل با کاربر بکار گرفته می شود.

در مثال زیر، نشانگر با استفاده از تصویر دلخواه ما تغییر پیدا می کند. در این حالت از آدرس تصویر مورد نظر را وارد خواهیم کرد.

برای استفاده از این روش بهتر است فرمت تصویر png باشد تا تنها قسمت های دلخواه از تصویر نشان داده شوند.

css

h1 {
    cursor: url(http://my-project.ir/img/cursor.png), default;
}

در ادامه انواع نشانگرهای قابل استفاده را میبینم: (با بردن نشانگر ماوس روی هر یک از خانه ها شکل آن تغییر خواهد کرد)

مشاهده و ویرایش کد در حالت تمام صفحه

css

.auto            { cursor: auto; }
.default         { cursor: default; }
.none            { cursor: none; }
.context-menu    { cursor: context-menu; }
.help            { cursor: help; }
.pointer         { cursor: pointer; }
.progress        { cursor: progress; }
.wait            { cursor: wait; }
.cell            { cursor: cell; }
.crosshair       { cursor: crosshair; }
.text            { cursor: text; }
.vertical-text   { cursor: vertical-text; }
.alias           { cursor: alias; }
.copy            { cursor: copy; }
.move            { cursor: move; }
.no-drop         { cursor: no-drop; }
.not-allowed     { cursor: not-allowed; }
.all-scroll      { cursor: all-scroll; }
.col-resize      { cursor: col-resize; }
.row-resize      { cursor: row-resize; }
.n-resize        { cursor: n-resize; }
.e-resize        { cursor: e-resize; }
.s-resize        { cursor: s-resize; }
.w-resize        { cursor: w-resize; }
.ns-resize       { cursor: ns-resize; }
.ew-resize       { cursor: ew-resize; }
.ne-resize       { cursor: ne-resize; }
.nw-resize       { cursor: nw-resize; }
.se-resize       { cursor: se-resize; }
.sw-resize       { cursor: sw-resize; }
.nesw-resize     { cursor: nesw-resize; }
.nwse-resize     { cursor: nwse-resize; }

پشتیبانی مرورگرها
تمام مرورگرها بجز مرورگرهای Firefox for Android و Android webview پشتیبانی می کنند.