آموزش ویژگی cursor در CSS

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش ویژگی cursor در CSS با من همراه باشید.

آموزش ویژگی cursor در CSS

Free-Learn

ویژگی cursor در CSS

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

بفرض مثال بصورت پیش فرض، وقتی ماوس بروی یک لینک قرار میگیرد شکل / استایل اشاره گر ماوس به یک دستآموزش کار با لینک ها یا Links در HTMLتبدیل می شود، حال دقیقا ما با استفاده از ویژگی cursor میتوانیم شکل شمایل ماوس رو به دلخواه در هنگام قرار گرفتن ماوس بروی یک لینک تغییر دهیم.

شکل اشاره گر ماوس ممکن است در پوسته / تِم / Theme های مختلف کمی با همدیگه متفاوت باشند. مثلا اگه از سیستم عامل ویندوز ۷ استفاده مینمایید و Theme دلخواه خودتون رو نصب کرده اید، استایل اشاره گر ماوس ممکن است در ظاهر کمی متفاوت باشند.

Free-Learn

مثال از این ویژگی

در ادامه میتوانید یک مثال از ویژگی cursor را در زبان CSS مشاهده نمایید، در مثال زیر مجموعه ای از استایل های اشاره گر ماوس را میتوانید مشاهده نمایید.

امتحان کنید

مثال شماره ۲ : تغییر شکل ماوس به فایل تصویر دلخواه ( مثلا من یه تصویر دارم میخوام اون به عنوان اشاره گر ماوس انتخاب بشه )

امتحان کنید

Free-Learn

جدول مشخصات ویژگی cursor در CSS

در جدول زیر میتوانید مشخصات کلی این ویژگی را در زبان CSS مشاهده نمایید.

مقدار پیش فرض auto
قابل ارث بری دارد | اطلاعات بیشتر
قابل متحرک سازی ندارد | اطلاعات بیشتر
نسخه CSS2
نحوه استفاده در جاوااسکریپت object.style.cursor=”pointer”;

Free-Learn

پشتیبانی مرورگرها

در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از ویژگی cursor در CSS پشتیبانی میکنند یا خیر.

نام ویژگی Chrome Firefox Opera Safari IE
cursor ۵٫۰ ۴٫۰ ۹٫۶ ۵٫۰ ۵٫۵

Free-Learn

شکل نوشتاری

نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این ویژگی در CSS بصورت زیر می باشد.

Free-Learn

جدول مقادیر ویژگی cursor در CSS

در جدول زیر میتوانید، مقادیری را که میتوان در این ویژگی استفاده کرد مشاهده نمایید.

مقدار توضیح
auto پیش فرض – اشاره گر ماوس توسط مرورگرها مشخص میشود
alias ماوس رو بیار روی من تا شکلش رو ببینی
all-scroll ماوس رو بیار روی من تا شکلش رو ببینی
cell ماوس رو بیار روی من تا شکلش رو ببینی
context-menu ماوس رو بیار روی من تا شکلش رو ببینی
col-resize ماوس رو بیار روی من تا شکلش رو ببینی
copy ماوس رو بیار روی من تا شکلش رو ببینی
crosshair ماوس رو بیار روی من تا شکلش رو ببینی
default ماوس رو بیار روی من تا شکلش رو ببینی
e-resize ماوس رو بیار روی من تا شکلش رو ببینی
ew-resize ماوس رو بیار روی من تا شکلش رو ببینی
grab ماوس رو بیار روی من تا شکلش رو ببینی
grabbing ماوس رو بیار روی من تا شکلش رو ببینی
help ماوس رو بیار روی من تا شکلش رو ببینی
move ماوس رو بیار روی من تا شکلش رو ببینی
n-resize ماوس رو بیار روی من تا شکلش رو ببینی
ne-resize ماوس رو بیار روی من تا شکلش رو ببینی
nesw-resize ماوس رو بیار روی من تا شکلش رو ببینی
ns-resize ماوس رو بیار روی من تا شکلش رو ببینی
nw-resize ماوس رو بیار روی من تا شکلش رو ببینی
nwse-resize ماوس رو بیار روی من تا شکلش رو ببینی
no-drop ماوس رو بیار روی من تا شکلش رو ببینی
none ماوس رو بیار روی من تا شکلش رو ببینی
not-allowed ماوس رو بیار روی من تا شکلش رو ببینی
pointer ماوس رو بیار روی من تا شکلش رو ببینی
progress ماوس رو بیار روی من تا شکلش رو ببینی
row-resize ماوس رو بیار روی من تا شکلش رو ببینی
s-resize ماوس رو بیار روی من تا شکلش رو ببینی
se-resize ماوس رو بیار روی من تا شکلش رو ببینی
sw-resize ماوس رو بیار روی من تا شکلش رو ببینی
text ماوس رو بیار روی من تا شکلش رو ببینی
URL قرار دادن فایل تصویر اشاره گر ماوس ( همانند مثال شماره ۲ )
vertical-text ماوس رو بیار روی من تا شکلش رو ببینی
w-resize ماوس رو بیار روی من تا شکلش رو ببینی
wait ماوس رو بیار روی من تا شکلش رو ببینی
zoom-in ماوس رو بیار روی من تا شکلش رو ببینی
zoom-out ماوس رو بیار روی من تا شکلش رو ببینی
initial استفاده از مقدار پیش فرض یا اولیه | اطلاعات بیشتر
inherit استفاده از مقدار پدر یا والد ( به ارث بری ) | اطلاعات بیشتر

Free-Learn

نکات و توضیحات

همانطور که در مثال شماره ۲ مشاهده مینمایید، ما میتوانیم با استفاده از مقدار URL در ویژگی cursor از فایل تصویر / یا آیکون اشاره گر دلخواه استفاده نماییم، میتوان بیش از ۱ عدد فایل دلخواه نیز استفاده کرد، فقط باید با استفاده از کاما اونارو از همدیگه جدا کرد.

همچنین سعی کنید حتما علاوه بر فایل دلخواه ،از مقادیر موجود در جدول مقادیر نیز استفاده نمایید تا اگر موقعی مشکلی در نمایش فایل دلخواه به وجود اومد اشاره گر ماوس بتواند از گزینه جایگزین استفاده نماید. مثال :

برای فایل اشاره گر ماوس میتوانید از فرمت های png , jpg , svg , cur و.. استفاده نمایید.

برای حفظ ظاهر عناصر ، لینک ها و.. سعی کنید از استایل های مناسب در مکان های مناسب استفاده نمایید و از استفاده بی جهت و بی ربط خودداری نمایید.

Free-Learn

دریافت PDF یا پرینت این مطلب