یہ مضمون Tailwind CSS میں کالم گرڈ پر ہوور اثر کو لاگو کرنے کے طریقے کو ظاہر کرے گا۔
ٹیل ونڈ میں کالم گرڈ پر ہوور کیسے لگائیں؟
Tailwind میں کالم گرڈ پر ہوور اثر کو لاگو کرنے کے لیے، ایک HTML فائل بنائیں اور ' ہوور 'کے ساتھ کلاس' grid-cols-
عملی نفاذ کے لیے فراہم کردہ اقدامات پر عمل کریں:
مرحلہ 1: HTML پروگرام میں کالم گرڈ کے ساتھ ہوور پراپرٹی کا استعمال کریں۔
ایک HTML پروگرام بنائیں اور استعمال کریں ' ہوور 'کے ساتھ جائیداد' grid-cols-
< جسم >
< div کلاس = 'grid grid-cols-3 hover:grid-cols-5 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-cols-3 کلاس بتاتی ہے کہ گرڈ میں 3 برابر سائز کے کالم ہونے چاہئیں۔
- ' hover:grid-cols-5 کلاس بتاتی ہے کہ جب ماؤس اس پر منڈلاتا ہے تو گرڈ کو 5 برابر سائز کے کالموں میں تبدیل کیا جانا چاہیے۔
- ' gap-3 کلاس ہر گرڈ آئٹم کے درمیان 3 اکائیوں کا فاصلہ طے کرتی ہے۔
- ' m-3 ” کلاس گرڈ کنٹینر کے ارد گرد 3 اکائیوں کے مارجن کا اطلاق کرتی ہے۔
- ' متن کا مرکز کلاس ہر گرڈ آئٹم کے متن کو مرکز میں سیٹ کرتی ہے۔
بچے میں
- ' ” گرڈ آئٹمز کی تعداد کی نمائندگی کرتا ہے۔
- ' bg-teal-500 ” کلاس گرڈ آئٹمز کے پس منظر میں ٹیل کا رنگ سیٹ کرتی ہے۔
- ' p-5 ” کلاس چائلڈ
آئٹمز کے اندر موجود مواد میں 5 یونٹس کی پیڈنگ کا اضافہ کرتی ہے۔مرحلہ 2: آؤٹ پٹ کی تصدیق کریں۔
کالم گرڈ پر ہوور اثر کو یقینی بنانے کے لیے، ویب صفحہ دیکھیں، اور ماؤس کو گرڈ آئٹمز پر منتقل کریں:
یہ دیکھا جا سکتا ہے کہ جب ماؤس گرڈ آئٹم پر گھومتا ہے تو کالموں کی تعداد بدل جاتی ہے۔ یہ اشارہ کرتا ہے کہ ہوور اثر کالم گرڈ پر کامیابی سے لاگو ہو گیا ہے۔
نتیجہ
ٹیل ونڈ میں کالم گرڈ پر ہوور اثر کو لاگو کرنے کے لیے، ' ہوور 'کے ساتھ کلاس' grid-cols-
HTML پروگرام میں افادیت۔ یہ ہوور پر کالموں کی تعداد کو تبدیل کرتا ہے۔ تبدیلیوں کو یقینی بنانے کے لیے، ویب HTML صفحہ دیکھیں اور ماؤس کو گرڈ آئٹمز پر ہوور کریں۔ اس مضمون نے Tailwind CSS میں کالم گرڈ پر ہوور اثر کو لاگو کرنے کا طریقہ دکھایا ہے۔