ویژگی CSS موس cursor (نشانگر) ظاهر موس را مشخص می‌کند هنگامی که روی یک عنصری که این ویژگی به آن اعمال شده است، موس حرکت می‌کند. این ویژگی فقط در محیط‌هایی با قابلیت ماوس و نشانگر قابل اجرا استفاده می‌شود. هدف اصلی این ویژگی افزایش قابلیت استفاده با نمایش بصری برخی عملکردها است.
مقادیر ممکن ویژگی cursor می‌تواند دارای مقادیر زیر باشد:
<url>: (اختیاری) شما می‌توانید از یک سری مقادیر url() که با کاما جدا شده‌اند استفاده کنید، هر url() به یک فایل تصویر اشاره می‌کند.
<x> <y>: (اختیاری) شما دارای گزینه‌ای برای تعیین مختصات x و y هستید که محل قرارگیری نقطه اصلی نشانگر را تعیین می‌کند و موقعیت دقیق در داخل تصویر نشانگر است که نشانگر به آن اشاره می‌کند.
<keyword>: یک مقدار کلیدی لازم است که نوع نشانگر یا نشانگر جایگزینی را که در صورت بارگیری نشدن هیچ یک از نمادهای مشخص شده بارگیری نمی‌شود، مشخص می‌کند.
جدول زیر مقادیر کلیدی موجود را لیست می‌کند.
ویژگی cursor در CSS، ظاهر نشانگر موس را هنگام نگهداری روی عناصر مختلف مشخص می‌کند. این ویژگی تنها در محیط‌هایی با قابلیت موس و نشانگر قابل اجرا استفاده می‌شود و هدف اصلی آن بهبود قابلیت استفاده است که با نمایش بصری توابع خاص را نشان می‌دهد.
مقادیر ممکن:
-
<url>: (اختیاری) شما می‌توانید از یک مجموعه از مقادیرurl()استفاده کنید که توسط ویرگول از هم جدا شده‌اند و هرurl()به یک فایل تصویر اشاره می‌کند. -
<x> <y>: (اختیاری) شما می‌توانید مختصاتxوyرا مشخص کنید که نقطه داغ موس را تعریف می‌کند و موقعیت دقیق در داخل تصویر نشانگر که نشانگر به آن اشاره می‌کند را مشخص می‌کند. -
<keyword>: یک مقدار کلیدی مورد نیاز است که نوع نشانگر مورد استفاده یا نشانگر جایگزین را مشخص می‌کند اگر هیچکدام از نمادهای مشخص شده بارگیری نشوند.
جدول مقادیر ممکن:
| دسته‌بندی | مقدار | توضیحات | |
|---|---|---|---|
| عمومی | auto | نشانگری که توسط عامل کاربر بر اساس زمینه فعلی تعیین می‌شود. این ویژگی پیش‌فرض است که مرورگر برای تعریف نشانگر استفاده می‌کند. | |
| default | نشانگر پیش‌فرض که به ویژه بر اساس سیستم عامل متفاوت است و معمولاً به صورت یک پیکان نمایش داده می‌شود. | ||
| none | هیچ نشانگری نمایش داده نمی‌شود. | ||
| لینک‌ها و وضعیت | context-menu | نشانگری از نوع منوی محتوا نمایش داده می‌شود. | |
| help | نشانگری از نوع راهنما نمایش داده می‌شود. | ||
| pointer | نشانگری از نوع اشاره‌گر نمایش داده می‌شود. | ||
| progress | نشانگری از نوع پیشرفت نمایش داده می‌شود. | ||
| wait | نشانگری از نوع انتظار نمایش داده می‌شود. | ||
| کشیدن و رها کردن | alias | نشانگری از نوع آلیاس نمایش داده می‌شود. | |
| copy | نشانگری از نوع کپی نمایش داده می‌شود. | ||
| move | نشانگری از نوع حرکت نمایش داده می‌شود. | ||
| no-drop | نشانگری از نوع بدون رها کردن نمایش داده می‌شود. | ||
| not-allowed | نشانگری از نوع ممنوع نمایش داده می‌شود. | ||
| grab | نشانگری از نوع گرفتن نمایش داده می‌شود. | ||
| grabbing | نشانگری از نوع دستگیره نمایش داده می‌شود. | ||
| انتخاب | cell | نشانگری از نوع سلول نمایش داده می‌شود. | |
| crosshair | نشانگری از نوع چشمک زن نمایش داده می‌شود. | ||
| text | نشانگری از نوع متن نمایش داده می‌شود. | ||
| vertical-text | نشانگری از نوع متن عمودی نمایش داده می‌شود. | ||
| بزرگنمایی | zoom-in | نشانگری از نوع بزرگنمایی نمایش داده می‌شود. | |
| zoom-out | نشانگری از نوع کوچکنمایی نمایش داده می‌شود. | ||
| تغییر اندازه و اسکرول | all-scroll | نشانگری از نوع اسکرول کل نمایش داده می‌شود. | |
| col-resize | نشانگری از نوع تغییر اندازه ستون نمایش داده می‌شود. | ||
| row-resize | نشانگری از نوع تغییر اندازه ردیف نمایش داده می‌شود. | ||
| n-resize | نشانگری از نوع تغییر اندازه به سمت شمال نمایش داده می‌شود. | ||
| e-resize | نشانگری از نوع تغییر اندازه به سمت شرق نمایش داده می‌شود. | ||
| s-resize | نشانگری از نوع تغییر اندازه به سمت جنوب نمایش داده می‌شود. | ||
| w-resize | نشانگری از نوع تغییر اندازه به سمت غرب نمایش داده می‌شود. | ||
| ne-resize | نشانگری از نوع تغییر اندازه به سمت شمال شرقی نمایش داده می‌شود. | ||
| nw-resize | نشانگری از نوع تغییر اندازه به سمت شمال غربی نمایش داده می‌شود. | ||
| se-resize | نشانگری از نوع تغییر اندازه به سمت جنوب شرقی نمایش داده می‌شود. | ||
| sw-resize | نشانگری از نوع تغییر اندازه به سمت جنوب غربی نمایش داده می‌شود. | ||
| ew-size | نشانگری از نوع تغییر اندازه به سمت شرق غرب نمایش داده می‌شود. | ||
| ns-resize | نشانگری از نوع تغییر اندازه به سمت شمال جنوب نمایش داده می‌شود. | ||
| nesw-resize | نشانگری از نوع تغییر اندازه به سمت شمال شرقی جنوب غربی نمایش داده می‌شود. | ||
| nwse-resize | نشانگری از نوع تغییر اندازه به سمت شمال غربی جنوب شرقی نمایش داده می‌شود. |
مناسب برای: تمام عناصر HTML.
سنتکس DOM
در دستور ساختار DOM، می‌توانید خاصیت cursor یک عنصر را با استفاده از جاوااسکریپت تنظیم کنید. در زیر نمونه‌ای از چگونگی انجام این کار آمده است:
object.style.cursor = "cell";در این دستور:
objectبه عنصری اشاره دارد که می‌خواهید خاصیتcursorآن را تغییر دهید..style.cursorنحوه دسترسی به خاصیتcursorدر استایل عنصر است."cell"مقداری است که برای خاصیتcursorمی‌خواهید تنظیم کنید.
در اینجا چند نکته در مورد خاصیت cursor وجود دارد:
- این خاصیت می‌تواند به ترکیبی از مقادیر، که می‌تواند شامل صفر تا چندین
<url>جدا شده توسط کاما باشد، به همراه یک مقدار کلیدی (که همه مقادیر آن در جدول بعدی آمده است) باشد. - هر
<url>باید به یک فایل تصویر اشاره کند که به عنوان مؤشر استفاده خواهد شد. - مرورگر سعی می‌کند ابتدا تصویر اول را بارگیری کند. اگر نتواند این کار را انجام دهد، به تصویر بعدی می‌رود و همینطور ادامه می‌دهد. اگر هیچکدام از تصاویر بارگیری نشوند یا هیچ تصویری مشخص نشود، به مقدار کلیدی ارائه شده برمی‌گردد.
مثال کلی
این کد HTML و CSS نمونه‌ای از انواع مختلف مؤشرها در CSS را نشان می‌دهد. در اینجا هر عنصر دارای یک مؤشر متفاوت است که موقع روی آن حرکت می‌کنید.
<html>
<head>
<title>All CSS Cursors</title>
<style>
.demo-cursor {
display: inline-block;
background-color: LightYellow;
width: 100px;
height: 100px;
margin: 10px;
border: 3px solid #ccc;
cursor: pointer;
}
.default { cursor: default; }
.auto { cursor: auto; }
.crosshair { cursor: crosshair; }
.pointer { cursor: pointer; }
.move { cursor: move; }
.text { cursor: text; }
.wait { cursor: wait; }
.help { cursor: help; }
.not-allowed { cursor: not-allowed; }
.progress { cursor: progress; }
.alias { cursor: alias; }
.copy { cursor: copy; }
.no-drop { cursor: no-drop; }
.e-resize { cursor: e-resize; }
.n-resize { cursor: n-resize; }
.ne-resize { cursor: ne-resize; }
.nw-resize { cursor: nw-resize; }
.s-resize { cursor: s-resize; }
.se-resize { cursor: se-resize; }
.sw-resize { cursor: sw-resize; }
.w-resize { cursor: w-resize; }
.ew-resize { cursor: ew-resize; }
.ns-resize { cursor: ns-resize; }
.nesw-resize { cursor: nesw-resize; }
.nwse-resize { cursor: nwse-resize; }
.col-resize { cursor: col-resize; }
.row-resize { cursor: row-resize; }
.zoom-in { cursor: zoom-in; }
.zoom-out { cursor: zoom-out; }
.grab { cursor: grab; }
.grabbing { cursor: grabbing; }
</style>
</head>
<body>
<h1>All CSS Cursors, hover the mouse on the blocks.</h1>
<div class="demo-cursor auto"><h3 style="text-align:center;">Auto</h3></div>
<div class="demo-cursor default"><h3 style="text-align:center;">Default</h3></div>
<div class="demo-cursor crosshair"><h3 style="text-align:center;">Crosshair</h3></div>
<div class="demo-cursor pointer"><h3 style="text-align:center;">Pointer</h3></div>
<div class="demo-cursor move"><h3 style="text-align:center;">Move</h3></div>
<div class="demo-cursor text"><h3 style="text-align:center;">Text</h3></div>
<div class="demo-cursor wait"><h3 style="text-align:center;">Wait</h3></div>
<div class="demo-cursor help"><h3 style="text-align:center;">Help</h3></div>
<div class="demo-cursor not-allowed"><h3 style="text-align:center;">Not-allowed</h3></div>
<div class="demo-cursor progress"><h3 style="text-align:center;">Progress</h3></div>
<div class="demo-cursor alias"><h3 style="text-align:center;">Alias</h3></div>
<div class="demo-cursor copy"><h3 style="text-align:center;">Copy</h3></div>
<div class="demo-cursor no-drop"><h3 style="text-align:center;">No-drop</h3></div>
<div class="demo-cursor e-resize"><h3 style="text-align:center;">e-resize</h3></div>
<div class="demo-cursor n-resize"><h3 style="text-align:center;">n-resize</h3></div>
<div class="demo-cursor ne-resize"><h3 style="text-align:center;">ne-resize</h3></div>
<div class="demo-cursor nw-resize"><h3 style="text-align:center;">nw-resize</h3></div>
<div class="demo-cursor s-resize"><h3 style="text-align:center;">s-resize</h3></div>
<div class="demo-cursor se-resize"><h3 style="text-align:center;">se-resize</h3></div>
<div class="demo-cursor sw-resize"><h3 style="text-align:center;">sw-resize</h3></div>
<div class="demo-cursor w-resize"><h3 style="text-align:center;">w-resize</h3></div>
<div class="demo-cursor ew-resize"><h3 style="text-align:center;">ew-resize</h3></div>
<div class="demo-cursor ns-resize"><h3 style="text-align:center;">ns-resize</h3></div>
<div class="demo-cursor nesw-resize"><h3 style="text-align:center;">nesw-resize</h3></div>
<div class="demo-cursor nwse-resize"><h3 style="text-align:center;">nwse-resize</h3></div>
<div class="demo-cursor col-resize"><h3 style="text-align:center;">col-resize</h3></div>
<div class="demo-cursor row-resize"><h3 style="text-align:center;">row-resize</h3></div>
<div class="demo-cursor zoom-in"><h3 style="text-align:center;">Zoom-in</h3></div>
<div class="demo-cursor zoom-out"><h3 style="text-align:center;">Zoom-out</h3></div>
<div class="demo-cursor grab"><h3 style="text-align:center;">Grab</h3></div>
<div class="demo-cursor grabbing"><h3 style="text-align:center;">Grabbing</h3></div>
</body>
</html>
در این کد:
- هر عنصر دارای یک کلاس به نام
demo-cursorاست که ویژگی‌هایی مانند اندازه، رنگ پس زمینه و مارجین را تنظیم می‌کند. - خاصیت
cursorبا استفاده از کلاس‌های مختلف مقداردهی شده است، که هرکدام نشان‌دهنده نوعی مؤشر هستند. - هنگام رویت ماوس بر روی هر عنصر، نوع مؤشر به‌طور پویا تغییر می‌کند و مطابق با نوع مؤشر مشخص شده در CSS استایل آن عنصر تغییر می‌کند.
مقدار url
در این کد HTML و CSS، از تصویر به عنوان مقدار مؤشر استفاده شده است.
<html>
<head>
<title>All CSS Cursors</title>
<style>
.demo-cursor {
display: inline-block;
background-color: LightYellow;
width: 100px;
height: 100px;
margin: 10px;
border: 3px solid #ccc;
cursor: url(images/try-it.jpg), pointer;
}
</style>
</head>
<body>
<h1>Image CSS Cursors, hover the mouse on the block.</h1>
<div class="demo-cursor"><h3 style="text-align:center;">Image Cursor</h3></div>
</div>
</body>
</html>
در این کد:
- یک کلاس به نام
demo-cursorتعریف شده است که اندازه، رنگ پس‌زمینه، و مارجین مربوط به عناصر را تنظیم می‌کند. - خاصیت
cursorبا استفاده ازurl()به عنوان مقدار، تنظیم شده است. اینurl()به یک تصویر مشخص اشاره دارد که باید به عنوان مؤشر استفاده شود. اگر تصویر موجود نباشد، مؤشر به جای این تصویر، به شکل مؤشر پیش‌فرض یاpointerنمایش داده می‌شود.
همچنین، یک تیتر هدینگ به عنوان توضیحاتی درباره مؤشرها نمایش داده شده است.
استفاده از چندین url
در این قطعه کد HTML و CSS، از چندین تصویر به عنوان مقادیر مؤشر استفاده شده است.
<html>
<head>
<title>All CSS Cursors</title>
<style>
.demo-cursor {
display: inline-block;
background-color: LightYellow;
width: 100px;
height: 100px;
margin: 10px;
border: 3px solid #ccc;
cursor: url(images/try-it.jpg),url(images/cursor-text1.png), crosshair;
}
</style>
</head>
<body>
<h1>Image CSS Cursors, hover the mouse on the block.</h1>
<div class="demo-cursor"><h3 style="text-align:center;">Image Cursor</h3></div>
</div>
</body>
</html>
در این کد:
- یک کلاس به نام
demo-cursorتعریف شده است که اندازه، رنگ پس‌زمینه، و مارجین مربوط به عناصر را تنظیم می‌کند. - خاصیت
cursorبا استفاده از چندینurl()به عنوان مقدار، تنظیم شده است. اینurl()به تصاویر مختلفی اشاره دارد که به عنوان مؤشر استفاده شوند. در این مثال، دو تصویر به طور پشت‌سرهم در نظر گرفته شده‌اند، و اگر تصویر اول یافت نشود، تصویر دوم به عنوان مؤشر استفاده خواهد شد. - در نهایت، مؤشر پیش‌فرض یا
crosshairتعیین شده است.
در زمان اجرا، اگر تصویر اول یافت نشود، اثر نقصان به کار خواهد آمد و مؤشر به تصویر دوم متصل می‌شود.
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام