Hover Effects and Click Interactions W3.CSS In Hindi
W3.CSS वेब डेवलपमेंट स्क्रिप्ट में होवर इफ़ेक्ट और क्लिक इंटरैक्शन यूजर डेवलप्ड वेबपेज वेबसाइट की डिफ़ॉल्ट बोरिंग यूजर इंटरैक्टिविटी और विज़ुअल अपीयरेंस को इम्प्रूव करने के लिए एक पावरफ़ुल टूल या फीचर्स हैं। जब इंटरनेट यूजर होवर इफ़ेक्ट वाली किसी वेबपेज या वेबसाइट में एक्शन ट्रिगर बटन, वेब लिंक, या डिव जैसे ब्लॉक एलिमेंट के साथ इंटरैक्ट या कम्यूनिकेट करते हैं. तो होवर इफ़ेक्ट वेब डेवलपर को स्मूद ट्रांज़िशन, एनिमेशन, और बेहतर विज़ुअल इंटरफ़ेस फ़ीडबैक ऐड करने के फीचर्स प्रोवाइड करता हैं।
W3.CSS वेबपेज फोर्मत्टिंग्स स्क्रिप्ट वेब डेवलपर को मल्टीप्ल टाइप की यूटिलिटी क्लास प्रोवाइड करता है, जिससे वेब डेवलपर एक कस्टम CSS सोर्स लिखे बिना इन इफ़ेक्ट को आसानी से अपने डिजायर वेबपेज एलिमेंट पर अप्लाई कर सकते हैं। यहाँ हमें नीचे कई तरह के कॉमन होवर इफ़ेक्ट और क्लिक इंटरैक्शन के बारे में बताया गया है. जिन्हें W3.CSS वेब डेवलपर जरूरत पड़ने पर अलग-अलग वेब ऑब्जेक्ट एलिमेंट पर अप्लाई कर सकते हैं।
Hover Effect Concepts in W3.CSS.
एक वेबसाइट वेबपेज में होवर इफ़ेक्ट तब ट्रिगर या एक्सेक्यू होते हैं, जब कोई वेब यूज़र किसी वेबपेज में क्रिएटेड होवर एलिमेंट, जैसे वेबपेज बटन, इमेज, या लिंक पर अपने माउस पॉइंटर को ले जाता है। W3.CSS वेब डेवलपर को कई तरह के होवर क्लास प्रोवाइड करता है, जो वेब डेवलपर को होवर एलिमेंट ऑब्जेक्ट पर डिफ़ॉल्ट स्टाइल ऐट्रिब्यूट्स को मॉडिफाई अपडेट करने के फीचर्स प्रोवाइड करता हैं. जिसमें वेबपेज में डिफाइन होवर वेबपेज एलिमेंट ऑब्जेक्ट की ओपेसिटी, कलर, और शैडो इफ़ेक्ट फीचर्स शामिल हैं।
Common hover effects used in W3.CSS.
- w3-hover-opacity – यह मौजूदा वेबपेज एलिमेंट पर होवर करने पर उस ऑब्जेक्ट एलिमेंट की ओपेसिटी को मॉडिफाई करता है।
- w3-hover-shadow – यह मौजूदा वेबपेज एलिमेंट पर होवर करने पर उस ऑब्जेक्ट एलिमेंट पर शैडो इफ़ेक्ट को ऐड करता है।
- w3-hover-shadow-small – यह मौजूदा वेबपेज एलिमेंट पर होवर करने पर एक स्माल शैडो इफ़ेक्ट को ऐड करता है।
- w3-hover-shadow-medium – यह मौजूदा वेबपेज एलिमेंट पर होवर करने पर एक मीडियम शैडो इफ़ेक्ट को ऐड करता है।
- w3-hover-shadow-large – यह मौजूदा वेबपेज एलिमेंट पर होवर करने पर एक लार्ज शैडो इफ़ेक्ट को ऐड करता है।
- w3-hover-color – यह मौजूदा वेबपेज एलिमेंट पर होवर करने पर उस ऑब्जेक्ट बैकग्राउंड के कलर को मॉडिफाई करता है।
- w3-hover-text-color – यह मौजूदा वेबपेज एलिमेंट पर होवर करने पर वेबपेज एलिमेंट टेक्स्ट के कलर को मॉडिफाई करता है।
Example of multiple hover effects in W3.CSS.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Let’s Explore Hover Effects Attributes in W3.CSS</title>
<link rel=”stylesheet” href=”https://www.w3schools.com/w3css/4/w3.css”>
</head>
<body>
<div class=”w3-container”>
<h2>Let’s Try Some Hover Effects with W3.CSS</h2>
<!– Here we add a hover effect with opacity –>
<button class=”w3-button w3-indigo w3-hover-opacity”>
Move Mouse Pointer to Hover
</button>
<br><br>
<!– Here we add a hover effect with shadow –>
<button class=”w3-button w3-aqua w3-hover-shadow”>
Move Mouse Over to See Shadow Effect
</button>
<br><br>
<!– Here we add a hover effect with background color change –>
<button class=”w3-button w3-red w3-hover-teal”>
Move Mouse Pointer to Change Background Color
</button>
<br><br>
<!– Here we add a hover effect with text color change –>
<button class=”w3-button w3-yellow w3-hover-text-red”>
Move Mouse Pointer to Change Text Color
</button>
</div>
</body>
</html>
Explanation of W3.CSS hover effects.
- w3-hover-opacity – यहाँ इस एक्साम्प्ल में वेबपेज एलिमेंट पे होवर करने पर मौजूदा बटन की ओपेसिटी कम हो जाती है. जिससे की यह बटन एक तरह से सेमी-ट्रांसपेरेंट हो जाता है।
- w3-hover-shadow-large – इस इफ़ेक्ट में होवर करने पर वेबपेज बटन के चारों तरफ एक बड़ा शैडो इफ़ेक्ट डिस्प्ले हो जाता है. जिससे बटन वेबपेज में कुछ उभरा हुआ सा डिस्प्ले होता है।
- w3-hover-color – इस इफ़ेक्ट में होवर करने पर वेबपेज बटन का बैकग्राउंड कलर चेंज हो जाता है।
- w3-hover-text-color – इस इफ़ेक्ट में होवर करने पर वेबपेज बटन का टेक्स्ट कलर मॉडिफाई हो जाता है।
Click interaction attributes concept in W3.CSS.
W3.CSS वेब डेवलपमेंट स्क्रिप्ट में क्लिक इंटरैक्शन सामान्य रूप से तब फ़ीडबैक प्रोवाइड करते हैं, जब वेब यूज़र किसी वेबपेज एलिमेंट पर मैन्युअली क्लिक या टैप करता है। W3.CSS डिज़ाइन वेबपेज में, वेब डेवलपर बटन पर क्लिक और इंटरैक्शन इफ़ेक्ट फीचर्स को मैनेज करने के लिए w3-active, w3-clickable, और w3-disabled W3.CSS क्लास का यूज़ कर सकते हैं।
Here is some common webpage elements click interaction classes.
- w3-active – यह क्लिक इंटरेक्शन इफ़ेक्ट मौजूदा वेबपेज में जब किसी एलिमेंट ऑब्जेक्ट पर क्लिक किया जाता है, तो यह उस क्लास को हाइलाइट करता है. ज्यादातर वेबपेज में डिफाइन बटन, लिंक, या नेविगेशन आइटम के लिए इन्हे यूज़ किया जाता है।
- w3-clickable – यह इफ़ेक्ट मौजूदा वेबपेज में फिक्स करता है कि उस वेबपेज एलिमेंट पर क्लिक किया जा सके, सामान्य रूप से इस क्लास का यूज़ वेबपेज में टेक्स्ट लिंक या div ब्लॉक के साथ किया जाता है, जो वेबपेज में एक बटन की तरह बिहेव करते हैं।
- w3-disabled – यह इफ़ेक्ट मौजूदा वेबपेज में किसी वेब एलिमेंट को डिसेबल करता है, जिससे वह उस वेबपेज में अनक्लिकेबल या डीएक्टिवेट हो जाता है, और यह डिस्प्ले करता है कि वह बटन मौजूदा पेज में इनएक्टिव डिफाइन है।
Example of the click interaction attribute in a W3.CSS class.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Let’s Explore Click Interactions Attributes in W3.CSS</title>
<link rel=”stylesheet” href=”https://www.w3schools.com/w3css/4/w3.css”>
</head>
<body>
<div class=”w3-container”>
<h2>Here We Try Click Interactions in W3.CSS Classes</h2>
<!– Here we add a button with an active state class –>
<button class=”w3-button w3-red w3-active”>
Click Button
</button>
<br><br>
<!– Here we add a clickable-looking div element with W3.CSS –>
<div class=”w3-button w3-pink”>
Clickable Div Block
</div>
<br><br>
<!– Here we add a disabled button –>
<button class=”w3-button w3-grey w3-disabled” disabled>
W3.CSS Disabled Button
</button>
</div>
</body>
</html>
Explanation of the click interaction attribute in a W3.CSS class.
- w3-active – यहाँ इस क्लिक इंटरेक्शन अप्लाई इफ़ेक्ट में जब बटन पर क्लिक किया जाता है, तो यह क्लास में उसे एक्टिव स्टेट (सामान्य रूप से उसका बैकग्राउंड या बॉर्डर बदलकर) अप्लाई या हाइलाइट किया जाता है।
- w3-clickable – यहाँ इस क्लिक इंटरेक्शन अप्लाई इफ़ेक्ट में div एलिमेंट को क्लिक करने कम्पेटिबल बटन की तरह बिहेव करने लायक क्रिएट करता है। यह वेबपेज में क्लास एलिमेंट को बटन की तरह स्टाइल नहीं करता है, बल्कि उसमें क्लिक क्लास इंटरेक्शन बिहेवियर को ऐड करता है, जिससे की वह मौजूदा वेबपेज में इंटरैक्टिव हो जाता है।
- w3-disabled – यह मौजूदा वेबपेज में डिफाइन बटन को अनक्लिकेबल या डीएक्टिवेट कर देता है, और उसका डिफ़ॉल्ट लुक डिसेबल कर देता है. डिफ़ॉल्ट रूप से उसे ग्रे कलर में कर देता है।
