آموزش CSS

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

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

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

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

h1 {
    cursor: move;
}
p {
    cursor: text;
}

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

ظاهر  

مقدار

نمونه

خروجی

 cursor default

پیش فرض

a:hover{cursor:default;}

TEST

 cursor pointer

اشاره گر

a:hover{cursor:pointer;}

TEST

 cursor text

متن

a:hover{cursor:text;}

TEST

 cursor wait

انتظار

a:hover{cursor:wait;}

TEST

 cursor help

کمک

a:hover{cursor:help;}

TEST

 cursor progress

در حال پیشرفت

a:hover{cursor:progress;}

TEST

 cursor crosshair

crosshair

a:hover{cursor:crosshair;}

TEST

 cursor move

حرکت دادن

a:hover{cursor:move;}

TEST

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

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

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

a {
    cursor: url("custom.gif"), url("custom.cur"), default;
}

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

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

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

در صورتی که سوال و یا نظری دارید، از بخش نظرات با ما در میان بگذارید.

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد

شما چه نظر و یا سوالی درباره این نوشته دارید؟

مبحث آموزشی

آموزش CSS

Learn CSS

پرســیدن سؤال جدید

سؤال های تخصصی خود را از ما بپرسید

دنبال کردن تلگرام کانال سافت اسکیل

https://telegram.me/softskill_ir

عملیات کاربران

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد

کلیک کنید و سوالات خود را از ما بپرسید
لطفا فرم سوال را پر کنید

سوال شما با موفقیت ثبت شد. برای اینکه بتوانیم به شما اطلاع رسانی کنیم، موارد زیر را وارد کنید:

لطفا چند لحظه منتظر بمانید ...