CSS cursor ویژگی، کمد لباس شخصی ماوس شما، نوع مکان نما را که نشانگر ماوس روی یک عنصر نمایش داده می شود، دیکته می کند. این به کاربران شما اجازه می دهد تا بدانند چه نوع عملی را می توانند انجام دهند، مانند یک سیگنال ترافیک دیجیتال. این یک جزئیات کوچک است، اما می تواند تجربه کاربری سایت شما را تا حد زیادی افزایش دهد!
نحو
نحو برای ما cursor ملک یک تکه کیک است.
به طور پیش فرض، مکان نما می گیرد auto مقدار، که به مرورگر این امکان را می دهد که بر اساس زمینه، مکان نما را تعیین کند.
این ویژگی آفتاب پرست را می توان برای همه عناصر HTML اعمال کرد، به جز (drumroll, لطفا) … برخی از عناصر در <head>. بنابراین، هر عنصر بصری HTML یک زمین بازی برای ویژگی مکان نما است.
در حالی که ممکن است امیدوار باشید که مکان نما کمی روی صفحه نمایش داده شود، انیمیشن های CSS نمی توانند روی ویژگی مکان نما اعمال شوند. بنابراین، متأسفانه هیچ نشانگر رقصی وجود ندارد.
را cursor دارایی توسط عناصر فرزند از والدین خود به ارث می رسد.
مثال
از منوی کرکره ای برای تغییر نوع نشانگر ماوس که هنگام نگه داشتن ماوس روی div نمایش داده می شود استفاده کنید:
ارزش کلمات کلیدی
بیایید گشتی در میان لباس‌های مختلف موجود در آن بزنیم cursor جا رختی.
پیش فرض
این “شلوار جین و تی شرت روزمره” کمد مکان نما شما است. این شکل پیش فرض مکان نما شما است، معمولاً یک فلش.
<کلید واژه>
همانطور که در نسخه ی نمایشی بالا مشاهده کردید، کلمات کلیدی زیادی وجود دارد که می توانید از آنها برای نمایش مکان نما برای انواع موقعیت ها استفاده کنید:
آدرس اینترنتی
همچنین می توانید مکان نماها را با تصاویر خود با استفاده از url تابع. بله، مکان نما شما می تواند یک عکس را نیز بپوشد! این مانند عکسبرداری شخصی مکان نما شماست.
1 |
.element { |
2 |
cursor: url('cursor.png'), auto; |
3 |
}
|
به یاد داشته باشید که همیشه یک مکان‌نمای عمومی را به‌عنوان بک آپ ارائه دهید، مانند auto، در صورتی که مکان نما سفارشی یا کلمه کلیدی خاصی پشتیبانی نشود.
x، y
ویژگی مکان نما CSS می تواند به صورت اختیاری مورد استفاده قرار گیرد x و y مختصات برای تنظیم یک نقطه داغ، نقطه دقیق در تصویر مکان نما سفارشی شما که موقعیت نشانگر خواهد بود، مانند:
1 |
.element { |
2 |
cursor: url('custom.png') 4 12, auto; |
3 |
}
|
در این کد، 4 12 هستند x و y مختصات نقطه داغ به ترتیب در تصویر “custom.png”. این به معنی مکان نما است نقطه فعال 4 پیکسل از سمت چپ و 12 پیکسل از بالای تصویر است.
بیشتر بدانید
زمانی را صرف درک ویژگی مکان نما کنید. این یک لمس کوچک است که می تواند به شما در کنترل جزئیات دقیق کمک کند، جنبه ای که اغلب نادیده گرفته می شود طراحی وب است که واقعاً می تواند تجربه را بهبود بخشد. کریس کویر
آموزش های مربوطه
در اینجا چند آموزش عالی از Tuts+ وجود دارد که به شما در تسلط بر ویژگی مکان نما کمک می کند:
- چگونه یک مکان نما سفارشی ماوس با CSS یا جاوا اسکریپت ایجاد کنیم
- نکته سریع: چگونه با CSS ظاهر مکان نما را دستکاری کنیم
مشخصات رسمی و پشتیبانی مرورگر
اگر هوس خواندن مطالب سنگین دارید یا می‌خواهید سازگاری مرورگر را بررسی کنید، اینجا بروید:
این CSS است cursor دارایی برای شما از آنجا خارج شوید و اجازه دهید مکان نماتان با استایل به سکوی راهپیمایی برسد.
