آموزش CSS – نشانگر ماوس (Cursor)

  • آپدیت شده در تاریخ

آموزش CSS

در جلسه قبل از آموزش CSS با ویژگی Outline در CSS آشنا شدید. در این بخش قصد داریم شما را با ویژگی Cursor در CSS آشنا کنیم.

خصوصیت Cursor در CSS برای تعیین نوع نشانگر موس به هنگام حرکت موس بر روی ناحیه خاص یا لینک موجود در صفحات وب مورد استفاده قرار می گیرد.

تغییر ظاهر نشانگر موس (Cursors):

معمولا مرورگرها نشانگر موس را در بر روی آیتم های لینک دار یا قابل کلیک به صورت دست و بر روی متن یا فیلد متنی به صورت نشانگر ویرایش نشان می دهند.

به کمک زبان CSS  می توانید نحوه نمایش نشانگر موس را به شیوه دلخواه تعریف کنید.

جدول زیر تفاوت بین نشانگرهای موسی که بیشتر مرورگرها می پذیرند را نشان می دهد.

برای دیدن نتیجه هر کدام علامت ماوس را روی کلمه “تست” در جدول ببرید.

ظاهرمقدارنمونهخروجی
 cursor defaultپیش فرضa:hover{cursor:default;}تست
 cursor pointerاشاره گرa:hover{cursor:pointer;}تست
 cursor textمتنa:hover{cursor:text;}تست
 cursor waitانتظارa:hover{cursor:wait;}تست
 cursor helpکمکa:hover{cursor:help;}تست
 cursor progressدر حال پیشرفتa:hover{cursor:progress;}تست
 cursor crosshaircrosshaira:hover{cursor:crosshair;}تست
 cursor moveحرکت دادنa:hover{cursor:move;}تست

ایجاد نشانگرهای سفارشی شده:

شما می توانید نشانگر موس را به صورت سفارشی ایجاد کنید.

خصوصیت Cursor لیستی دارد که توسط کاما از هم جدا شده اند و مقادیر تعریف شده توسط کاربر در آن به کار می رود.

اگر نشانگر موسی که قبل از همه تعریف شده است به درستی تعیین نگردد یا پیدا نشود، نشانگر بعدی که در لیست به آن اشاره شده است مورد استفاده قرار می گیرد.

اگر این نشانگر نیز درست نبود نشانگر بعدی موجود در لیست انتخاب می گردد.

اگر هیچ کدام از Cursor های تعریف شده توسط کاربر معتبر نباشد یا توسط مرورگر پشتیبانی نگردد، نشانگر عمومی (generic cursor) که در انتهای لیست بیان شده مورد استفاده قرار خواهد گرفت.

نکته: فرمت استانداردی که می توان برای نشانگر موس  استفاده کرد فرمت .cur   است.  با اینحال شما می توانید تصاویری همچون JPG، GIF  را به فرمت .cur   تبدیل کنید. برای اینکار می توانید از نرم افزارهای رایگانی که وجود دارد بهره مند شوید.

فایل custom.gif و custom.cur در بخش سورس کد پایین این پست قرار داده شده اند.

در مثال بالا custom.gif و custom.cur فایل نشانگر سفارشی هستند و بر روی سرور آپلود شده اند. default نیز فایل نشانگر عمومی است.

هشدار: اگر نشانگر سفارشی را اعلان می کنید باید یک نشانگر عمومی نیز در انتهای لیست تعریف کرده باشید. در غیر اینصورت نشانگر سفارشی به درستی رندر نخواهد شد.

نکته: مرورگر IE9 و نسخه های پایین تر از آن  برای نشانگر استاتیک از مقادیر URL نوع .cur  و نوع .ani   برای نشانگر متحرک پشتیبانی می کنند. با اینحال مرورگرهایی همچون فایر فاکس، کروم و سفری از .cur ، .png ،.gif   و .jpg   پشتیبانی می کنند ولی از .ani پشتیبانی نمی کنند.

 

امیدوارم در این بخش آموزش CSS, از خصوصیت Cursor در CSS نهایت استفاده را برده باشید.

در بخش بعدی با overflow در CSS آشنا می شویم.

هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .

موفق باشید.

حسن شفیعی علاقه خاصی به برنامه نویسی وب و موبایل دارم و هر روز تلاش می کنم به این حوزه مسلط تر شوم و اطلاعاتم را به شکل کاربردی برای علاقه مندان در وب به اشتراک بگذارم

آموزش های رایگان بیشتر در اینستاگرام ما ...

NETPARADIS /
مطالب زیر را حتما بخوانید
دیدگاه کاربران

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

    دوره های آموزشی

    می خواهید صفر تا صد HTML,CSS را یاد بگیرید ؟

    50% تخفیف ویژه
    فقط 144 هزار تومان

    برای دریافت آموزش طراحی سایت با پروژه قالب فروشگاه روی دکمه زیر بزنید
    می خواهم طراحی سایت را یاد بگیرم
    close-link