اس دستی کا مقصد یہ دریافت کرنا ہے کہ سی ایس ایس کا استعمال کرتے ہوئے ہوور پر تصویر کو کیسے تبدیل کیا جائے۔ تو، آئیے شروع کریں!
سی ایس ایس میں ہوور کیا ہے؟
:hover pseudo-class کا ایک عنصر ہے جو HTML عناصر کی حالت کو تبدیل کرنے کے لیے استعمال ہوتا ہے جب کوئی ماؤس اسے متحرک کرتا ہے۔ یہ CSS سلیکٹر بنیادی طور پر سٹائل یا عناصر کو منتخب کرنے کے لیے استعمال کیا جاتا ہے۔ تاہم، یہ لنکس پر لاگو نہیں کیا جا سکتا.
نحو
:hover کا نحو ذیل میں دیا گیا ہے:
عنصر : ہوور {
سی ایس ایس کوڈ۔ . .
}
یہاں، ' عنصر ” سے مراد وہ عنصر ہے جس میں آپ ہوور اثر کو لاگو کرنا چاہتے ہیں۔
اب، ہم CSS کا استعمال کرتے ہوئے ہوور پر تصویر کو تبدیل کرنے کی عملی مثال پر جائیں گے۔
مثال: سی ایس ایس کا استعمال کرتے ہوئے ہوور پر تصویر کو کیسے تبدیل کیا جائے؟
پہلے ہوور پر تصویر کو تبدیل کرنے کے لیے، HTML سیکشن میں دو تصاویر شامل کریں۔ پہلی تصویر فعال حالت کے لیے ہے، اور اگلی تصویر ہوور ریاست کے لیے ہے۔
مرحلہ 1: تصاویر شامل کریں۔
مخصوص مقصد کے لئے، ہم دو تصاویر شامل کریں گے، ' image1 'اور' image2 ، اور دوسری تصویر کو کلاس کا نام تفویض کریں بطور ' hover_img '
ایچ ٹی ایم ایل
< جسم >< div کلاس = 'img' >
< img src = 'image1.png' >
< img src = 'image2.png' کلاس = 'hover_img' >
< / div >
< / جسم >
مرحلہ 2: انداز کی تصاویر
اب، 'کا استعمال کرتے ہوئے دونوں امیجز کی پوزیشن سیٹ کرنے کے لیے CSS پر جائیں۔ پوزیشن ' جائیداد. ہم اس کی پوزیشن کا تعین کریں گے ' مطلق اس کے قریب ترین والدین کے حوالے سے اسے بالکل پوزیشن میں رکھنا۔
سی ایس ایس
.img {پوزیشن : مطلق ;
}
یہ مندرجہ ذیل نتیجہ دکھائے گا:
اگلے مرحلے میں، ہم پہلی تصویر کے سامنے دوسری تصویر سیٹ کریں گے۔ ایسا کرنے کے لیے، ہم تصویر کی پوزیشن کو ' مطلق اور اوپر اور بائیں پوزیشن کو بطور سیٹ کریں 0 ' اس تصویر کو استعمال کرتے ہوئے پہلی تصویر کے سامنے رکھا جاتا ہے، لیکن ہم دوسری تصویر کو اس وقت ڈسپلے کرنا چاہتے ہیں جب اس پر کوئی ماؤس ہور کرے۔ لہذا، ڈسپلے کی قیمت کو 'کے طور پر ترتیب دیں کوئی نہیں 'مطلوبہ نتیجہ دکھائے گا:
.hover_img {پوزیشن : مطلق ;
سب سے اوپر : 0 ;
بائیں : 0 ;
ڈسپلے : کوئی نہیں ;
}
دیئے گئے کوڈ کا آؤٹ پٹ اس طرح ہے:
دوسری تصویر کامیابی سے پہلی تصویر کے پیچھے چھپی ہوئی ہے۔
اب، اگلے مرحلے پر جائیں.
مرحلہ 3: ہوور پر تصویر تبدیل کریں۔
اگلا، استعمال کریں ' : ہوور 'اور منتخب کریں' .img 'منتخب عنصر پر ہوور لگانے کے لیے۔ پھر، دوسری تصویر کے کلاس کا نام تفویض کریں ' .hover_img ' اس کے بعد، قوسین کے اندر، ڈسپلے پراپرٹی کی قدر کو 'کے طور پر مقرر کریں لائن میں ' جو عنصر کو ایک ہی لائن میں فٹ ہونے پر مجبور کرے گا:
.img : ہوور .hover_img {ڈسپلے : لائن میں ;
}
یہاں وہ نتیجہ ہے جو ظاہر کرتا ہے کہ تصویر تبدیل ہو جاتی ہے جب صارف اس پر ہوور کرتا ہے:
اوپر دیا گیا آؤٹ پٹ اشارہ کرتا ہے کہ ہم نے CSS کا استعمال کرتے ہوئے ہوور پر تصویر کو کامیابی سے تبدیل کر دیا ہے۔
نتیجہ
تصویر کو ہوور پر تبدیل کیا جا سکتا ہے ' : ہوور 'چھدم کلاس عنصر۔ ایسا کرنے کے لیے، HTML فائل میں مطلوبہ تصاویر شامل کریں، انہیں CSS کا استعمال کرتے ہوئے اسی پوزیشن میں سیٹ کریں، اور ان پر :hover سلیکٹر لگائیں۔ نتیجے کے طور پر، پہلی تصویر بدل جائے گی جب اس پر ہوور ہو جائے گا۔ اس مضمون میں، ہم نے ایک عملی مثال کے ساتھ :hover کا استعمال کرتے ہوئے ہور پر تصویر کو تبدیل کرنے کا طریقہ بتایا ہے۔