टेलविंड होवर, फोकस और एक्टिव स्टेट्स के साथ टेक्स्ट डेकोरेशन कैसे लागू करें

Telavinda Hovara Phokasa Aura Ektiva Stetsa Ke Satha Teksta Dekoresana Kaise Lagu Karem



वेब पेज या साइट पर विभिन्न कार्यात्मकताओं को शामिल करते समय, ऐसे उदाहरण होते हैं जहां प्रोग्रामर को इंटरैक्टिव लिंक जोड़ने की आवश्यकता होती है जो उपयोगकर्ता की कार्रवाई यानी माउस होवर पर प्रमुख हो जाते हैं। ऐसे परिदृश्यों में, विभिन्न राज्यों के अनुसार पाठ को सजाने से साइट को अलग दिखाने में चमत्कार होता है।

यह ब्लॉग निम्नलिखित सामग्री क्षेत्रों को शामिल करता है:

टेलविंड होवर, फोकस और एक्टिव स्टेट्स के साथ टेक्स्ट डेकोरेशन कैसे लागू करें?

पाठ को 'के माध्यम से सजाया जा सकता है' text-decoration ' संपत्ति। इस संपत्ति को विभिन्न संशोधक स्थितियों के साथ लागू किया जा सकता है जैसे कि ' मंडराना ', ' केंद्र ' और ' सक्रिय उपयोगकर्ता की कार्रवाई के अनुसार पाठ को सजाने के लिए।





उदाहरण 1: 'होवर' स्थिति के साथ टेक्स्ट सजावट लागू करना

यह उदाहरण 'पर लागू होता है text-decoration 'संपत्ति ऐसी है कि यह डिफ़ॉल्ट रूप से रेखांकित नहीं होती है लेकिन माउस होवर पर रेखांकित हो जाती है:





< एचटीएमएल >

< सिर >

< मेटा charset = 'यूटीएफ-8' >

< मेटा नाम = 'व्यूपोर्ट' सामग्री = 'चौड़ाई=डिवाइस-चौड़ाई, प्रारंभिक-पैमाना=1' >

< लिखी हुई कहानी स्रोत = 'https://cdn.tailwindcss.com' < / लिखी हुई कहानी < / सिर >

< शरीर >

< पाठ क्षेत्र कक्षा = 'नो-अंडरलाइन होवर:अंडरलाइन' > यह टेलविंड सीएसएस है < / पाठ क्षेत्र >

< / शरीर >

< / एचटीएमएल >

कोड की इन पंक्तियों के अनुसार, 'के भीतर सीडीएन पथ निर्दिष्ट करें' <सिर> टेलविंड कार्यक्षमताओं का उपयोग करने के लिए टैग। अब, संयुक्त लागू करें ' text-decoration 'संपत्ति के साथ-साथ' मंडराना 'ऐसा बताएं कि तत्व को मँडराने पर वह रेखांकित हो जाए।



उत्पादन



जैसा कि देखा गया है, '