آموزش CSS – قسمت 14 – نشانگر موس

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

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

کد:


<span style=”cursor: wait”>

ماوس خود را روی این متن قرار دهید

.</span>

اگر بخواهید وقتی ماوس کاربر روی یک قسمت مشخص از صفحه مثلاً جدولها قرار می گیرد شکل خاصی داشته باشد می توانید در بخش HEAD صفحه این ویژگی را برای جدول تعریف کنید تا در همه جدولهای صفحه به کار گرفته شود. از class و id هم می توانید استفاده کنید. روش ساده تر هم استفاده از شناسه style در تگهای HTML است.

در جدول زیر برخی از مقادیر مختلف این ویژگی که شکل نشانگر ماوس را عوض می کنند آورده شده است

auto این گزینه نشانگر ماوس را با توجه به تنظیمات مرورگر کاربر تغییر می دهد.
crosshair
نشانگر ماوس به صورت به علاوه در می آید.
default
نشانگر ماوس به صورت همان فلش همیشگی در می آید.
move
نشانگر به شکلی در می آید که در هنگام جا به جا کردن چیزی به خود می گیرد.
pointer
نشانگر به شکل دست در می آید.
help
یک علامت سؤال کنار پیکان نشانگر ماوس قرار می گیرد.
text
به شکلی در می آید که بر روی متنها به خود می گیرد.
wait
به شکل ساعت شنی در می آید.
n-resize
یک فلش به سمت شمال
s-resize
یک فلش به سمت جنوب
e-resize
یک فلش به سمت مشرق
w-resize
یک فلش به سمت مغرب
ne-resize
یک فلش به سمت شمال شرقی
nw-resize
یک فلش به سمت شمال غربی
se-resize
یک فلش به سمت جنوب شرقی
sw-resize
یک فلش به سمت جنوب غربی

بیشتر بخوانید  آموزش CSS - قسمت 12 - رنگ فونت

4 دیدگاه در “آموزش CSS – قسمت 14 – نشانگر موس”

  1. ممنون از سایت خوبتون و با آرزوی موفقیت

    یه سوال و اینکه اگه بخوایم کلا نشانگر ماوس رو عوض کنیم .مثلا غیر از نشانگر های خود ویندوز . یه نشانگر جدید طراحی کنیم و تو صفحه وب ازش استفاده کنیم چیکار باید کرد.

    خودم چند روش امتحان کردم ولی جواب نداده.

    پیشنهادی دارید؟

  2. کدی در css وجود داره به نام cursor که برای تعویض نشانگر موس روی یک ناحیه استفاده میشه مثلا :

    h2
    {
    cursor: crosshair
    }

    در این حالت هرجا که که با استایل h2 بنویسید نشانگر موس به شکل + در می آید .
    همچنین شما میتونید نشانگر موسی طراحی کنید با پسور Cur بعد در کد css بنویسید : cursor : url(“address/name.cur”)
    address/name.cur مسیر فایل شما می باشد

دیدگاهتان را بنویسید

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