یہ مضمون Tailwind CSS میں قطار گرڈ پر ہوور اثر کو لاگو کرنے کا طریقہ دکھائے گا۔
ٹیل ونڈ میں رو گرڈ پر ہوور کیسے لگائیں؟
ٹیل ونڈ میں قطار گرڈ پر ہوور اثر کو لاگو کرنے کے لیے، ایک HTML فائل بنائیں اور ' ہوور 'کے ساتھ کلاس' grid-rows-
عملی نفاذ کے لیے دیے گئے اقدامات کو دیکھیں:
مرحلہ 1: HTML پروگرام میں رو گرڈ کے ساتھ ہوور پراپرٹی کا استعمال کریں۔
ایک HTML پروگرام بنائیں اور استعمال کریں ' ہوور 'کے ساتھ جائیداد' grid-rows-
< جسم >
< div کلاس = 'grid grid-rows-3 hover:grid-rows-5 grid-flow-col gap-3 m-3 text-center' >
< div کلاس = 'bg-teal-500 p-5' > 1 < / div >
< div کلاس = 'bg-teal-500 p-5' > 2 < / div >
< div کلاس = 'bg-teal-500 p-5' > 3 < / div >
< div کلاس = 'bg-teal-500 p-5' > 4 < / div >
< div کلاس = 'bg-teal-500 p-5' > 5 < / div >
< div کلاس = 'bg-teal-500 p-5' > 6 < / div >
< div کلاس = 'bg-teal-500 p-5' > 7 < / div >
< div کلاس = 'bg-teal-500 p-5' > 8 < / div >
< div کلاس = 'bg-teal-500 p-5' > 9 < / div >
< div کلاس = 'bg-teal-500 p-5' > 10 < / div >
< / div >
< / جسم >
یہاں، پیرنٹ
- ' گرڈ ” کلاس کو گرڈ لے آؤٹ بنانے کے لیے استعمال کیا جاتا ہے۔
- ' grid-rows-3 کلاس بتاتی ہے کہ گرڈ میں 3 برابر سائز کی قطاریں ہونی چاہئیں۔
- ' hover:grid-rows-5 کلاس گرڈ کو 5 برابر سائز کی قطاروں میں تبدیل کرتی ہے جب ایک ماؤس اس پر منڈلاتا ہے۔
- ' grid-flow-col ” کلاس گرڈ آئٹمز کو کالموں میں افقی طور پر رکھتا ہے۔
- ' gap-3 کلاس ہر گرڈ آئٹم کے درمیان 3 اکائیوں کا فاصلہ طے کرتی ہے۔
- ' m-3 ” کلاس گرڈ کنٹینر کے ارد گرد 3 اکائیوں کے مارجن کا اطلاق کرتی ہے۔
- ' متن کا مرکز کلاس ہر گرڈ آئٹم کے متن کو مرکز میں سیٹ کرتی ہے۔
بچے میں
- ' ” گرڈ آئٹمز کی تعداد کی نمائندگی کرتا ہے۔
- ' bg-teal-500 ” کلاس گرڈ آئٹمز کے پس منظر میں ٹیل کا رنگ سیٹ کرتی ہے۔
- ' p-5 ” کلاس چائلڈ
آئٹمز کے اندر موجود مواد میں 5 یونٹس کی پیڈنگ کا اضافہ کرتی ہے۔مرحلہ 2: آؤٹ پٹ کی تصدیق کریں۔
اس بات کی تصدیق کرنے کے لیے کہ ہوور اثر قطار گرڈ پر لاگو ہو گیا ہے، ویب صفحہ دیکھیں، اور ماؤس کو گرڈ آئٹمز پر منتقل کریں:
یہ دیکھا جا سکتا ہے کہ ابتدائی طور پر 3 قطاریں ہوتی ہیں اور جب ماؤس اس پر منڈلاتا ہے تو قطاروں کی تعداد 5 ہو جاتی ہے۔ اس سے ظاہر ہوتا ہے کہ ہوور اثر قطار گرڈ پر کامیابی سے لاگو ہو گیا ہے۔
نتیجہ
ٹیل ونڈ میں قطار گرڈ پر ہوور اثر کو لاگو کرنے کے لیے، ' ہوور 'کے ساتھ کلاس' grid-rows-
HTML پروگرام میں افادیت۔ یہ ہور پر قطاروں کی تعداد کو تبدیل کرتا ہے۔ تبدیلیوں کو یقینی بنانے کے لیے، ویب HTML صفحہ دیکھیں اور ماؤس کو گرڈ آئٹمز پر ہوور کریں۔ اس مضمون نے ٹیل ونڈ CSS میں قطاروں کے گرڈ پر ہوور اثر کو لاگو کرنے کے طریقے کی وضاحت کی ہے۔