CSS میں، مختلف قسم کے کرسر مختلف HTML عناصر کے لیے استعمال کیے جاتے ہیں، اور کرسر کی قسم کو تبدیل کرنے کے لیے، ' کرسر 'پراپرٹی استعمال ہوتی ہے۔ یہ آپ کو کرسر کی قسم کو تبدیل کرنے اور کرسر کی قیمت مقرر کرنے کی اجازت دیتا ہے جسے آپ اسکرین پر ڈسپلے کرنا چاہتے ہیں۔ ایک اضافی خصوصیت کے طور پر، یہ آپ کو اپنی کرسر کی تصویر بھی سیٹ کرنے دیتا ہے۔

اس گائیڈ میں، آپ سیکھیں گے:

• کرسر سی ایس ایس پراپرٹی کیا ہے؟
• CSS کا استعمال کرتے ہوئے ہوور پر کرسر کو تصویر میں کیسے تبدیل کریں۔

تو، چلو شروع کریں!

'کرسر' سی ایس ایس پراپرٹی کیا ہے؟

HTML عنصر پر ماؤس کی ظاہری شکل کو کنٹرول کرنے کے لیے، ' کرسر CSS کی پراپرٹی استعمال کی جا سکتی ہے۔ یہ باقاعدہ کرسر کو مختلف اقسام میں تبدیل کرنے کی اجازت دیتا ہے جیسے کاپی کرسر، ہینڈ پوائنٹر، گراب، اور بہت کچھ۔ آپ کرسر پراپرٹی میں امیج کا یو آر ایل سیٹ کر کے بھی اپنی مرضی کا کرسر سیٹ کر سکتے ہیں۔

نحو

کرسر پراپرٹی کا نحو اس طرح دیا گیا ہے:

اوپر دیے گئے نحو میں، تصویر کا راستہ ' url() جسے آپ اسکرین پر ظاہر کرنا چاہتے ہیں۔

اب ہم مثال پر جائیں گے تاکہ ہور پر ریگولر کرسر کو تصویر میں تبدیل کیا جا سکے۔

CSS کا استعمال کرتے ہوئے ہوور پر کرسر کو تصویر میں کیسے تبدیل کیا جائے؟

ہوور پر کرسر کو تصویر میں تبدیل کرنے کے لیے، پہلے، HTML میں ایک عنصر شامل کریں۔

مثال 1: کرسر پراپرٹی کا استعمال کرتے ہوئے ہوور پر کرسر کو تصویر میں تبدیل کرنا

ہم ایک عنوان بنائیں گے

اور بٹن کلاس کا نام “ بی ٹی این '

ایچ ٹی ایم ایل

< جسم >
< h1 > ہوور پر کرسر کو تصویر میں تبدیل کریں۔ h1 >
< بٹن کلاس = 'بی ٹی این' > مجھے کلک کیجیے بٹن >
جسم >

فی الحال، بٹن پر منڈلانے سے پہلے سے طے شدہ کرسر نظر آئے گا:

اب CSS پر جائیں اور کرسر کو تصویر میں تبدیل کریں۔

پھر، تصویر کا راستہ 'میں مقرر کریں url() ' مثال کے طور پر، ہم نے 'i with.svg ہماری منتخب تصویر کے طور پر۔ پھر، کرسر کی خاصیت کی قدر کو 'کے طور پر مقرر کریں آٹو '

سی ایس ایس

.btn {
کرسر: یو آر ایل ( icon.svg ) , آٹو
پیڈنگ: 10px؛
}

مندرجہ بالا کوڈ کو محفوظ کریں اور مندرجہ ذیل نتیجہ دیکھنے کے لیے HTML فائل پر عمل کریں:

دیا گیا آؤٹ پٹ اشارہ کرتا ہے کہ کرسر کامیابی کے ساتھ ہوور پر ایک تصویر میں تبدیل ہو گیا ہے۔

نوٹ: ' آٹو ” کو کرسر پراپرٹی میں متبادل آپشن کے طور پر استعمال کیا جاتا ہے۔ جب تصویر لوڈ نہیں ہوتی ہے، یا فائل کا راستہ یا فائل خود غائب ہے، تو آٹو ویلیو کی وجہ سے ڈیفالٹ آئیکن اسکرین پر ظاہر ہوتا ہے۔

مثال 2: ہوور پر ڈیفالٹ کرسر سیٹ کرنا

مثال کے طور پر، ہم امیج کا یو آر ایل دیں گے اور صرف کرسر پراپرٹی کی ویلیو سیٹ کریں گے ' آٹو ”:

کرسر: یو آر ایل ( ) , آٹو

نتیجتاً، بٹن پر منڈلانے پر کرسر تبدیل نہیں ہوگا:

مثال 3: ہوور پر تصویر کا متبادل ترتیب دینا

آٹو کی جگہ، آپ کرسر کی مختلف ویلیوز سیٹ کر سکتے ہیں جسے آپ تصویر کے متبادل کے طور پر ڈسپلے کرنا چاہتے ہیں۔ مثال کے طور پر، ہم کرسر پراپرٹی کی قدر کو 'سے تبدیل کریں گے۔ آٹو 'سے' پوائنٹر ”:

کرسر: یو آر ایل ( ) , پوائنٹر

جیسا کہ آپ نیچے دیے گئے آؤٹ پٹ میں دیکھ سکتے ہیں، جب کرسر بٹن پر منڈلاتا ہے تو اسے ہینڈ پوائنٹر میں تبدیل کر دیا جاتا ہے۔

ہم نے CSS کا استعمال کرتے ہوئے ہوور پر کرسر کی تصویر کو تبدیل کرنے کا سب سے آسان طریقہ فراہم کیا ہے۔

نتیجہ

سی ایس ایس میں، آپ کرسر کو ہوور پر تصویر میں تبدیل کر سکتے ہیں۔ کرسر ' جائیداد. یہ تفویض کرکے ایک تصویر میں باقاعدہ کرسر کو تبدیل کرنے کی اجازت دیتا ہے۔ یو آر ایل کرسر کی خاصیت میں تصویر کا۔ آپ کسی بھی قسم کا کرسر لگا سکتے ہیں جب آپ اسے کسی عنصر پر منڈلاتے ہوئے ڈسپلے کرنا چاہتے ہیں۔ اس مضمون نے کرسر کو ہینڈ پوائنٹر میں تبدیل کرنے کا طریقہ دکھایا۔