یہ مضمون ٹیل ونڈ میں باکس کی سجاوٹ کے ساتھ ہوور لگانے کے طریقہ کار کو ظاہر کرے گا۔
ٹیل ونڈ میں باکس ڈیکوریشن بریک پر ہوور کیسے لگائیں؟
'باکس ڈیکوریشن بریک' سی ایس ایس پراپرٹی کسی عنصر کے پس منظر، بارڈر اور پیڈنگ کی رینڈرنگ کا تعین کرتی ہے جب یہ متعدد لائنوں یا کالموں میں پھیلا ہوا ہے۔ باکس کی سجاوٹ کے وقفے کے عناصر پر ہوور اثر کو لاگو کرنے کے لیے، اسے استعمال کرنے کی ضرورت ہے۔ ہوور ' جائیداد اور عناصر پر کوئی اثر لاگو کریں۔
عملی مظاہرے کے لیے ذیل میں فراہم کردہ اقدامات دیکھیں:
مرحلہ 1: HTML پروگرام میں باکس ڈیکوریشن بریک پر ہوور پراپرٹی کا استعمال کریں۔
ایک HTML پروگرام بنائیں اور باکس ڈیکوریشن بریک عناصر پر کسی بھی ہوور پراپرٹی کو استعمال کریں۔ مثال کے طور پر، ہم نے لاگو کیا ہے ' ہوور: باکس-ڈیکوریشن-کلون 'باکس ڈیکوریشن سلائس' عنصر پر پراپرٹی اور ایک ' ہوور: متن-پیلا-500 'باکس-ڈیکوریشن-کلون' عنصر پر پراپرٹی:
< جسم >
< مدت کلاس = 'box-decoration-slice hover:box-decoration-clone bg-teal-600 text-white text-3xl px-2' >
لینکس < بی آر / >
اشارہ
< / مدت >
< بی آر >
< بی آر >
< مدت کلاس = 'box-decoration-clone hover:text-yellow-500 bg-teal-600 text-white text-3xl px-2' >
لینکس < بی آر / >
اشارہ
< / مدت >
< / جسم >
یہاں:
- ' ہوور: باکس-ڈیکوریشن-کلون ' باکس ڈیکوریشن-کلون' اثر کا اطلاق ہوتا ہے جب 'باکس ڈیکوریشن سلائس' عنصر کو منڈلا دیا جاتا ہے۔
- ' ہوور: متن-پیلا-500 جب 'box-decoration-clone' عنصر کو منڈلا دیا جاتا ہے تو متن کا رنگ پیلے رنگ میں بدل جاتا ہے۔
مرحلہ 2: آؤٹ پٹ کی تصدیق کریں۔
آؤٹ پٹ کی تصدیق کے لیے HTML پروگرام چلائیں:
مندرجہ بالا آؤٹ پٹ سے پتہ چلتا ہے کہ ہوور اثر ان عناصر پر لاگو کیا گیا ہے جس کے مطابق اس کی وضاحت کی گئی تھی۔
نتیجہ
Tailwind CSS کسی بھی عنصر پر ہوور اثرات لاگو کرنے کے لیے یوٹیلیٹی کلاسز کا مجموعہ پیش کرتا ہے۔ باکس ڈیکوریشن بریک عناصر پر ہوور لگانے کے لیے، استعمال کریں ' ہوور پراپرٹی اور HTML پروگرام میں اثر کی وضاحت کریں۔ صارف پس منظر کا رنگ، متن کا رنگ، اور بارڈر کا رنگ تبدیل کر سکتے ہیں، یا ہوور پر کسی عنصر میں سایہ شامل کر سکتے ہیں۔ اس مضمون میں ٹیل ونڈ میں باکس کی سجاوٹ کے ساتھ ہوور لگانے کے طریقہ کار کی وضاحت کی گئی ہے۔