در جلسه قبل از آموزش CSS با ویژگی Outline در CSS آشنا شدید. در این بخش قصد داریم شما را با ویژگی Cursor در CSS آشنا کنیم.
خصوصیت Cursor در CSS برای تعیین نوع نشانگر موس به هنگام حرکت موس بر روی ناحیه خاص یا لینک موجود در صفحات وب مورد استفاده قرار می گیرد.
تغییر ظاهر نشانگر موس (Cursors):
معمولا مرورگرها نشانگر موس را در بر روی آیتم های لینک دار یا قابل کلیک به صورت دست و بر روی متن یا فیلد متنی به صورت نشانگر ویرایش نشان می دهند.
به کمک زبان CSS می توانید نحوه نمایش نشانگر موس را به شیوه دلخواه تعریف کنید.
|
1 2 3 4 5 6 |
h1 { cursor: move; } p { cursor: text; } |
جدول زیر تفاوت بین نشانگرهای موسی که بیشتر مرورگرها می پذیرند را نشان می دهد.
برای دیدن نتیجه هر کدام علامت ماوس را روی کلمه “تست” در جدول ببرید.
| ظاهر | مقدار | نمونه | خروجی |
 |
پیش فرض | a:hover{cursor:default;} | تست |
 |
اشاره گر | a:hover{cursor:pointer;} | تست |
 |
متن | a:hover{cursor:text;} | تست |
 |
انتظار | a:hover{cursor:wait;} | تست |
 |
کمک | a:hover{cursor:help;} | تست |
 |
در حال پیشرفت | a:hover{cursor:progress;} | تست |
 |
crosshair | a:hover{cursor:crosshair;} | تست |
 |
حرکت دادن | a:hover{cursor:move;} | تست |
ایجاد نشانگرهای سفارشی شده:
شما می توانید نشانگر موس را به صورت سفارشی ایجاد کنید.
خصوصیت Cursor لیستی دارد که توسط کاما از هم جدا شده اند و مقادیر تعریف شده توسط کاربر در آن به کار می رود.
اگر نشانگر موسی که قبل از همه تعریف شده است به درستی تعیین نگردد یا پیدا نشود، نشانگر بعدی که در لیست به آن اشاره شده است مورد استفاده قرار می گیرد.
اگر این نشانگر نیز درست نبود نشانگر بعدی موجود در لیست انتخاب می گردد.
اگر هیچ کدام از Cursor های تعریف شده توسط کاربر معتبر نباشد یا توسط مرورگر پشتیبانی نگردد، نشانگر عمومی (generic cursor) که در انتهای لیست بیان شده مورد استفاده قرار خواهد گرفت.
نکته: فرمت استانداردی که می توان برای نشانگر موس استفاده کرد فرمت .cur است. با اینحال شما می توانید تصاویری همچون JPG، GIF را به فرمت .cur تبدیل کنید. برای اینکار می توانید از نرم افزارهای رایگانی که وجود دارد بهره مند شوید.
|
1 2 3 |
a { cursor: url("custom.gif"), url("custom.cur"), default; } |
فایل custom.gif و custom.cur در بخش سورس کد پایین این پست قرار داده شده اند.
در مثال بالا custom.gif و custom.cur فایل نشانگر سفارشی هستند و بر روی سرور آپلود شده اند. default نیز فایل نشانگر عمومی است.
هشدار: اگر نشانگر سفارشی را اعلان می کنید باید یک نشانگر عمومی نیز در انتهای لیست تعریف کرده باشید. در غیر اینصورت نشانگر سفارشی به درستی رندر نخواهد شد.
نکته: مرورگر IE9 و نسخه های پایین تر از آن برای نشانگر استاتیک از مقادیر URL نوع .cur و نوع .ani برای نشانگر متحرک پشتیبانی می کنند. با اینحال مرورگرهایی همچون فایر فاکس، کروم و سفری از .cur ، .png ،.gif و .jpg پشتیبانی می کنند ولی از .ani پشتیبانی نمی کنند.
امیدوارم در این بخش آموزش CSS, از خصوصیت Cursor در CSS نهایت استفاده را برده باشید.
در بخش بعدی با overflow در CSS آشنا می شویم.
هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .
موفق باشید.
