Computer >> कंप्यूटर ट्यूटोरियल >  >> प्रोग्रामिंग >> CSS

इनलाइन CSS के साथ होवर इफेक्ट कैसे कोड करें?

कभी-कभी आपको इनलाइन CSS लिखने के लिए मजबूर किया जाता है, उदाहरण के लिए HTML ईमेल टेम्प्लेट्स में — आपके ईमेल/न्यूज़लेटर प्रदाता के आधार पर।

लेकिन आप इनलाइन CSS के साथ होवर इफेक्ट कैसे प्राप्त करते हैं?

आप नहीं कर सकते, लेकिन आप JavaScript के onMouseOver और onMouseOut मेथड का उपयोग करके वही होवर इफेक्ट बना सकते हैं।

मान लीजिए आप हाइपरलिंक के रंग को होवर (या माउसओवर) पर नीले से लाल में बदलना चाहते हैं:

<a href="#your-url-path" onMouseOver="this.style.color='red'" onMouseOut="this.style.color='green'" >Click here to Subscribe</a>

परिणाम:

Click here to Subscribe

सामान्य तौर पर, इनलाइन CSS आदर्श नहीं है, लेकिन कभी-कभी आपको चीजों को पूरा करने के लिए कम आदर्श कोड का उपयोग करने के लिए मजबूर किया जाता है।

  1. CSS से होवर पर एलिमेंट को ज़ूम/स्केल कैसे करें? CSS से होवर पर एलिमेंट को ज़ूम/स्केल कैसे करें?

    CSS से होवर पर एलिमेंट को ज़ूम/स्केल करने के लिए, कोड निम्नानुसार है -उदाहरण<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>    * {       box-sizing: border-box; &nb

  1. CSS से पैरालैक्स स्क्रोलिंग प्रभाव कैसे बनाएं? CSS से पैरालैक्स स्क्रोलिंग प्रभाव कैसे बनाएं?

    CSS से पैरालैक्स स्क्रोलिंग प्रभाव बनाने के लिए, कोड निम्नानुसार है -उदाहरण<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>    body {       font-family: "Segoe

  1. CSS से होवर पर ट्रांज़िशन कैसे जोड़ें? CSS से होवर पर ट्रांज़िशन कैसे जोड़ें?

    CSS से होवर पर ट्रांज़िशन जोड़ने के लिए, कोड निम्नानुसार है -उदाहरण<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>    body {       font-family: "Segoe UI"