कैसे लिखें: इनलाइन सीएसएस में होवर?

Question

मेरे पास एक मामला है जहां मुझे इनलाइन सीएसएस कोड लिखना होगा, और मैं एक एंकर पर एक हॉवर शैली लागू करना चाहता हूं।

मैं a:hoverHTML शैली विशेषता के अंदर इनलाइन सीएसएस का उपयोग कैसे कर सकता हूं ?

उदाहरण के लिए, आप मज़बूती से HTML ईमेल में CSS कक्षाओं का उपयोग नहीं कर सकते हैं।

Comments

HTML को ब्लॉगिंग अनुप्रयोगों में एम्बेड करना भी अक्सर इनलाइन शैलियों के अनन्य उपयोग की आवश्यकता होती है। खासकर यदि आप किसी तृतीय पक्ष क्लाइंट के माध्यम से html को एम्बेड कर रहे हैं और उपयोगकर्ता के विषयों तक कोई पहुंच नहीं है।

— प्रोविडेंस

इसके लिए एक प्रस्तावित सीएसएस मानक है; पता नहीं किस प्रकार के ब्राउज़र का समर्थन हो सकता है (संकेत: वे कस्टम टैग जैसे -Moz

— काटो

के संभावित डुप्लिकेट Is इनलाइन छद्म शैलियाँ बनाने के लिए संभव है?

— सिंटेक

ओह अब छोड़िए भी। कभी-कभी आप बस एक लैंडिंग पेज प्रोटोटाइप का निर्माण कर रहे हैं और आप स्टाइलशीट को फोर्क करने या नई टेम्प्लेट शाखा बनाने के लिए नहीं चाहते हैं या हरे रंग का बटन बेहतर काम करता है या नहीं, इसका परीक्षण करने के लिए। शीश।

— एल्बेल जूल

@FriendlyNeighborhoodIdiot यह पेज 13 साल पुराना है, ड्राफ्ट को तब से छोड़ दिया गया है।

— टोफंडेल

Answer 1

संक्षिप्त उत्तर: आप नहीं कर सकते।

लंबा जवाब: आपको नहीं चाहिए।

शैली को लागू करने के लिए इसे एक वर्ग नाम या एक आईडी दें और स्टाइलशीट का उपयोग करें।

:hoverएक छद्म चयनकर्ता है और, सीएसएस के लिए , केवल स्टाइल शीट के भीतर अर्थ है। कोई इनलाइन-शैली समतुल्य नहीं है (क्योंकि यह चयन मानदंड को परिभाषित नहीं कर रहा है)।

ओपी की टिप्पणियों का जवाब:

गतिशील रूप से CSS नियम जोड़ने पर एक अच्छी स्क्रिप्ट के लिए जावास्क्रिप्ट के साथ पूरी तरह से Pwn CSS देखें । विषय पर कुछ सिद्धांत के लिए चेंज स्टाइल शीट भी देखें ।

इसके अलावा, मत भूलो, अगर आप एक विकल्प है, तो आप बाहरी स्टाइलशीट्स के लिंक जोड़ सकते हैं। उदाहरण के लिए,

<script type="text/javascript">
  var link = document.createElement("link");
  link.setAttribute("rel","stylesheet");
  link.setAttribute("href","http://wherever.com/yourstylesheet.css");
  var head = document.getElementsByTagName("head")[0];
  head.appendChild(link);
</script>

सावधानी: ऊपर माना जाता है कि एक सिर अनुभाग है।

Comments

आप जावास्क्रिप्ट में सीएसएस कक्षाएं जोड़ सकते हैं

— जोनाथन फिंगलैंड

ऐसी अन्य परिस्थितियां हैं जहां इनलाइन सीएसएस एकमात्र विकल्प है - जैसे कि HTML ईमेल (जैसे जीमेल सीएसएस को अनदेखा करता है जब तक कि यह इनलाइन न हो)। दुर्भाग्य से जावास्क्रिप्ट के साथ सबसे ईमेल ग्राहकों में छीन लिया और साथ ही मुझे अभी तक जोड़ने का एक तरीका नहीं मिला है: हॉवर प्रभाव।

— साइमन ईस्ट

@ काटो, जबकि यह एक महान कड़ी है, और मैं वास्तव में कामना करता हूं, दुख की बात है कि यह नहीं है। बस पुष्टि करने के लिए, मैंने सिंटैक्स का उपयोग करके परीक्षण किया style="{color:green;} :hover { color: red; }"और फ़ायरफ़ॉक्स लिंक ग्रीन को रंग देने में कामयाब रहा, लेकिन होवर को अनदेखा कर दिया। क्रोम ने दोनों को नजरअंदाज कर दिया। निरंतर परीक्षण बहुत व्यर्थ होगा।

— जोनाथन फिंगलैंड

मैंने इसे एक समाधान के रूप में नहीं बताया। मैंने कहा कि "पूरी तरह से" सही नहीं है यह कहना है कि कोई इनलाइन समतुल्य नहीं है और छद्म चयनकर्ताओं का स्टाइलशीट के बाहर कोई अर्थ नहीं है। वह अनुचित कैसे है?

— काटो

क्यों लंबा जवाब है आप नहीं ... आप ... आप सामान्यीकरण नहीं करना चाहिए। मैं HTML के साथ ई-मेल संदेश भेजने की कोशिश कर रहा था, लेकिन लगता है क्या ... जीमेल सभी शैली टैग, सभी बाहरी शैली संदर्भ और सभी लिपियों को हटा देता है। इसलिए ... क्या जीमेल के लिए भेजे गए ईमेल के अंदर लिंक के रंग को हॉवर करने का कोई तरीका है? आशा है यह करता है ... आशा मरने के लिए अंतिम है !!! =)

— मिगुएल एंजेलो

Answer 2

आप जावास्क्रिप्ट के साथ अपनी शैली को बदलकर onMouseOverऔर onMouseOutमापदंडों में एक ही प्रभाव प्राप्त कर सकते हैं , हालांकि यह बेहद अक्षम है यदि आपको एक से अधिक तत्वों को बदलने की आवश्यकता है:

<a href="abc.html"
   onMouseOver="this.style.color='#0F0'"
   onMouseOut="this.style.color='#00F'" >Text</a>

इसके अलावा, मुझे यकीन है कि अगर thisइस संदर्भ में काम करता है याद नहीं कर सकते । आपको इसके साथ स्विच करना पड़ सकता है document.getElementById('idForLink')।

Comments

यह स्मार्ट है! पृष्ठभूमि रंग हॉवर प्रभाव के लिए भी काम करता है<div onMouseOver="this.style.backgroundColor='#F8F8F8'" onMouseOut="this.style.backgroundColor='#FFFFFF'"> ...

— mxro

इसे 'चतुर' के रूप में देखने पर हँसना है :) यह कल्पना करना मुश्किल है कि कुछ लोग आसपास नहीं थे जब यह प्रमुख / एकमात्र तरीका था जिससे आप इस प्रभाव को प्राप्त कर सकते थे। या इससे भी बदतर, एक 'छवि' के लिए और छवि को स्वैप करना है, बस 'होवर' प्रभाव देना है। मुझे बूढ़ा लगता है! लेकिन कहने के लिए पर्याप्त है, यह ओपी के सवाल का जवाब देता है :)

— मनची

मुझे इस पर मनची के साथ सहमत होना होगा। यह 90 के दशक की भौगोलिकता जावास्क्रिप्ट के लिए एक फ्लैशबैक की तरह है, पी

— एरिक कास्त्रो

पुराना, नया, प्राचीन या आगे। इसने सवाल का जवाब दिया और मेरी मदद की। साभार, @peter

— user2060451

मुझे एक ईमेल के लिए ऐसा करने की जरूरत थी और यह काम कर गया। धन्यवाद! यह वास्तव में स्वीकृत उत्तर के विपरीत प्रश्न को हल करता है।

— TheUtherSide

Answer 3

आप इसे अतीत में किसी बिंदु पर कर सकते हैं । लेकिन अब (उसी मानक के नवीनतम संशोधन के अनुसार, जो उम्मीदवार की सिफारिश है) आप नहीं कर सकते।

Comments

अन्य सभी जवाबों ने कहा कि यह संभव नहीं है, लेकिन आपका यह दर्शाता है कि यह संभव है, आपका उत्तर अलग है, मैं इसका परीक्षण कर रहा हूं।

— अमृत ​​एल्गारि

क्षमा करें, मैंने अभी लेख की तिथि जाँची है। इसकी 10 साल पुरानी है। इसलिए इसकी कोई गारंटी नहीं है कि यह काम करे। अगर ऐसा है, तो कृपया मुझे भी बताएं।

— फदीन

मैंने इसका परीक्षण किया: <a href="http://www.w3.org/" style="{color: #900} :link {background: #ff0} :visited {background: #fff} :hover {outline: thin red solid} :active {background: #00f}">...</a> लेकिन यह काम नहीं किया

— अमृत ​​एल्गर

: में मामला किसी को भी इस सवाल का जवाब भर आता है, उत्तर देने यहां इस सुविधा के बारे में प्रश्न पोस्ट stackoverflow.com/questions/9884182/...

— BoltClock

कहने के लिए अधिक सटीक, आप अतीत में किसी बिंदु पर कर सकते थे। लेकिन अब (उसी मानक के नवीनतम संशोधन के अनुसार, जो उम्मीदवार की सिफारिश है) आप नहीं कर सकते ।

— इल्या स्ट्रेलित्सिन

Answer 4

मैं इसमें बहुत देरी से योगदान कर रहा हूं, हालांकि मैं किसी को भी यह सुझाव देने के लिए दुखी नहीं था कि अगर आपको वास्तव में इनलाइन कोड की आवश्यकता है, तो ऐसा करना संभव है। कुछ हॉवर बटन के लिए मुझे इसकी आवश्यकता थी, विधि यह है:

.hover-item {
	background-color: #FFF;
}

.hover-item:hover {
	background-color: inherit;
}

<a style="background-color: red;">
	<div class="hover-item">
		Content
	</div>
</a

इस स्थिति में, इनलाइन कोड: "पृष्ठभूमि-रंग: लाल;" होवर पर स्विच रंग है, जिस रंग की आपको आवश्यकता है उसे वहां रखें और फिर यह समाधान काम करता है। मुझे एहसास है कि यह अनुकूलता के मामले में सही समाधान नहीं हो सकता है लेकिन यह काम करता है अगर यह बिल्कुल आवश्यक है।

Comments

धन्यवाद। यह एक महान जवाब है, मुझे लगता है कि यह उत्तर समाधान के रूप में होना चाहिए।

— होवनेस सार्सियन

नहीं, ओपी ने कहा कि वे इसे HTML स्टाइल विशेषता के अंदर इनलाइन सीएसएस चाहते थे ।

— jj_

मुझे पता है, jj_- हालाँकि यह विधि आपको CSS में केवल कुछ पंक्तियाँ डालने की अनुमति देती है और इसे कई जगहों पर इस्तेमाल करती है, कई लोगों ने (अपने आप सहित) इसे एक सहायक विकल्प के रूप में पाया है।

— lukesrw

यह एक मामूली संशोधन के साथ वास्तविक जवाब होना चाहिए: शैली में किसी भी रंग को निर्धारित न करें, बस जब हॉवर किया जाए, तो माता-पिता से विरासत में लेने का नियम और फिर दो रंगों को इनलाइन सेट करें।

— ह्यको कोरयून

यह करने के लिए सिर्फ "सामान्य" तरीका है, जो हर कोई कह रहा था कि यह सही तरीका है। हालाँकि यह एक इनलाइन तरीका नहीं है, जो ओपी मूल अनुरोध था।

— 13

Answer 5

आप वास्तव में वही नहीं कर सकते जो आप बता रहे हैं, चूंकि a:hoverचयनकर्ता का हिस्सा है, न कि सीएसएस नियमों का। एक स्टाइलशीट के दो घटक हैं:

selector {rules}

इनलाइन शैलियों में केवल नियम हैं; चयनकर्ता वर्तमान तत्व होने के लिए निहित है।

चयनकर्ता एक अभिव्यंजक भाषा है जो एक्सएमएल जैसे दस्तावेज़ में तत्वों से मेल खाने के लिए मापदंड का एक सेट का वर्णन करता है।

हालाँकि, आप पास हो सकते हैं, क्योंकि एक styleसेट तकनीकी रूप से लगभग कहीं भी जा सकता है:

<html>
  <style>
    #uniqueid:hover {do:something;}
  </style>
  <a id="uniqueid">hello</a>
</html>

Comments

वास्तव में आप यह नहीं कर सकते हैं: "HTML किसी दस्तावेज़ के HEAD अनुभाग में कई तत्वों की अनुमति देता है।" ( w3.org/TR/html4/pret/styles.html#edef-STYLE )

— अरुजो

मेरी मशीन पर काम करता है। धन्यवाद!

— जोश हबदास

@ AllricAraujo: फिर एक <html> </html>टैग के तहत इस सभी सामग्री को लपेटें

— फुडिन

Answer 6

जावास्क्रिप्ट का उपयोग करना:

क) इनलाइन शैली जोड़ना

document.head.insertAdjacentHTML('beforeend', '<style>#mydiv:hover{color:red;}</style>');

बी) या थोड़ा कठिन तरीका - "माउसओवर" जोड़ना

document.getElementById("mydiv").onmouseover= function(e){this.className += ' my-special-class'; };
document.getElementById("mydiv").onmouseleave= function(e){this.className = this.className.replace('my-special-class',''); };

---

नोट: font-sizeजावास्क्रिप्ट में बहु-शब्द शैली (यानी ) एक साथ लिखी गई हैं :

element.style.fontSize="12px"

Comments

चूँकि यह उत्तर नीचे संपादित किया गया है, इसलिए यह अब मूल प्रश्न से पूरी तरह अप्रासंगिक प्रतीत होता है ...

— बिल

वाह, यह बॉक्स के बाहर सोच रहा है ... मुझे यह पसंद है!

— theglossy1

Answer 7

यह सबसे अच्छा कोड उदाहरण है:

<a
 style="color:blue;text-decoration: underline;background: white;"
 href="http://aashwin.com/index.php/education/library/"
 onmouseover="this.style.color='#0F0'"
 onmouseout="this.style.color='#00F'">
   Library
</a>

मॉडरेटर सुझाव: अपनी चिंताओं को अलग रखें।

एचटीएमएल

<a
 style="color:blue;text-decoration: underline;background: white;"
 href="http://aashwin.com/index.php/education/library/"
 class="lib-link">
   Library
</a>

जे एस

const libLink = document.getElementsByClassName("lib-link")[0];
// The array 0 assumes there is only one of these links,
// you would have to loop or use event delegation for multiples
// but we won't go into that here
libLink.onmouseover = function () {
  this.style.color='#0F0'
}
libLink.onmouseout = function () {
  this.style.color='#00F'
}

Answer 8

इनलाइन pseudoclass घोषणाएं सीएसएस के वर्तमान पुनरावृत्ति में समर्थित नहीं हैं (हालांकि, जो मैं समझता हूं, वह भविष्य के संस्करण में आ सकता है)।

अभी के लिए, आपकी सबसे अच्छी शर्त शायद एक स्टाइल ब्लॉक को सीधे उस लिंक के ऊपर परिभाषित करना है जिसे आप स्टाइल करना चाहते हैं:

<style type="text/css">
    .myLinkClass:hover {text-decoration:underline;}
</style>
<a href="/foo" class="myLinkClass">Foo!</a>

Comments

वह विचार सौभाग्य से गिरा दिया जाएगा। (देखें सूची .w3.org / Archives / Public / www-style / 2009Jun / 0341.html , "परित्यक्त वर्किंग ड्राफ्ट" के तहत।)

— Ms2ger

वहां एक है । इस जवाब में गायब है।

— जोएल

Answer 9

जैसा कि बताया गया है, आप होवर के लिए मनमाने ढंग से इनलाइन स्टाइल सेट नहीं कर सकते, लेकिन आप सीएसएस में होवर कर्सर की शैली को उपयुक्त टैग में निम्नलिखित का उपयोग करके बदल सकते हैं :

style="cursor: pointer;"

Comments

इसका सबसे अच्छा जवाब होना चाहिए

— व्लादिस्लाव गुलेव

Answer 10

<style>a:hover { }</style>
<a href="/">Go Home</a>

होवर एक छद्म वर्ग है, और इस तरह एक शैली विशेषता के साथ लागू नहीं किया जा सकता है। यह चयनकर्ता का हिस्सा है।

Comments

@ डेरेक अभी भी रुचि के मामले में / किसी और के पढ़ने के लिए: "~ /" (tilde फॉरवर्ड स्लैश) asp.net वेब अनुप्रयोगों में एप्लिकेशन रूट का एक सर्वर-साइड संदर्भ है। (एप्लिकेशन रूट पाठ्यक्रम का एक उप-फ़ोल्डर हो सकता है)। यह यहाँ उपयोग सही नहीं होगा, इसलिए जब से आपने प्रश्न पूछा है इसका उत्तर संपादित किया गया है (मुझे संदेह है)।

— क्रिस

Answer 11

तुम यह केर सकते हो। लेकिन इनलाइन शैलियों में नहीं। आप का उपयोग कर सकते हैं onmouseoverऔर onmouseoutघटनाओं:

<div style="background: #333; padding: 10px; cursor: pointer"
   onmouseover="this.style.backgroundColor='#555';" onmouseout="this.style.backgroundColor='#333';">
      Hover on me!
</div>

Answer 12

आपकी टिप्पणियों के अनुसार, आप वैसे भी एक जावास्क्रिप्ट फ़ाइल भेज रहे हैं। जावास्क्रिप्ट में रोलओवर करें। jQuery की $.hover()विधि इसे आसान बनाती है, जैसा कि हर दूसरे जावास्क्रिप्ट रैपर करता है। यह सीधे जावास्क्रिप्ट में भी कठिन नहीं है।

Comments

हालांकि यह एक काम है, लेकिन यह मेरे लिए एक बहुत अच्छा जवाब देता है और सबसे अच्छा जवाब अगर वास्तव में इनलाइन हॉवर लिखना संभव नहीं है

— अमृत ​​एल्गरि

Answer 13

ऐसा करने का कोई तरीका नहीं है। आपके विकल्प एक जावास्क्रिप्ट या एक सीएसएस ब्लॉक का उपयोग करना है।

शायद कुछ जावास्क्रिप्ट लाइब्रेरी है जो एक मालिकाना शैली विशेषता को एक शैली ब्लॉक में बदल देगा। लेकिन तब कोड मानक-अनुरूप नहीं होगा।

Answer 14

मैंने अभी एक अलग उपाय निकाला।

मेरा मुद्दा: मेरे पास <a>कुछ स्लाइड्स / मुख्य सामग्री दर्शक के साथ-साथ <a>पाद लेख में टैग भी हैं। मैं चाहता हूं कि वे IE में एक ही स्थान पर जाएं, इसलिए पूरे पैराग्राफ को रेखांकित किया जाएगा onHover, भले ही वे लिंक न हों: एक पूरे के रूप में स्लाइड एक लिंक है। IE अंतर नहीं जानता है। मेरे पाद लेख में कुछ वास्तविक लिंक भी हैं जिन्हें रेखांकित करने और रंग बदलने की आवश्यकता है onHover। मैंने सोचा कि मुझे रंग बदलने के लिए फूटर टैग के साथ शैलियों को इनलाइन करना होगा, लेकिन ऊपर से सलाह बताती है कि यह असंभव है।

समाधान: मैंने फूटर लिंक को दो अलग-अलग वर्गों में दिया, और मेरी समस्या हल हो गई। मैं onHoverएक वर्ग में रंग परिवर्तन करने में सक्षम था , स्लाइड onHoverमें कोई रंग परिवर्तन / रेखांकन नहीं है, और अभी भी पाद में बाहरी HREFS और एक ही समय में स्लाइड करने में सक्षम है!

Answer 15

मैं छाया से सहमत हूं । आप जावास्क्रिप्ट के माध्यम से CSS को बदलने के लिए onmouseoverऔर onmouseoutईवेंट का उपयोग कर सकते हैं ।

और यह मत कहो कि लोगों को जावास्क्रिप्ट सक्रिय करने की आवश्यकता है। यह केवल एक शैली का मुद्दा है, इसलिए यह कोई फर्क नहीं पड़ता कि जावास्क्रिप्ट के बिना कुछ आगंतुक हैं;) हालांकि अधिकांश वेब 2.0 जावास्क्रिप्ट के साथ काम करते हैं। देखें फेसबुक या (जावास्क्रिप्ट के बहुत सारे) उदाहरण के लिए माइस्पेस ।

Answer 16

इस खेल में बहुत देर हो चुकी है, लेकिन आप एक HTML ईमेल में जावास्क्रिप्ट का उपयोग कब करेंगे? उदाहरण के लिए, जिस कंपनी में मैं वर्तमान में काम करता हूं (अबोडे के साथ गाया जाता है), हम अधिकांश ईमेल विपणन अभियानों के लिए सबसे कम सामान्य भाजक का उपयोग करते हैं - और जावास्क्रिप्ट का उपयोग अभी नहीं किया जा रहा है। कभी। जब तक आप किसी प्रकार के पूर्व-प्रसंस्करण की बात नहीं कर रहे हैं।

जैसा कि एक संबंधित पोस्ट में उल्लेख किया गया है: "लोटस नोट्स, मोज़िला थंडरबर्ड, आउटलुक एक्सप्रेस और विंडोज लाइव मेल सभी कुछ जावास्क्रिप्ट निष्पादन का समर्थन करते हैं। कुछ और नहीं करता है।"

उस लेख का लिंक जिससे यह लिया गया था: [ http://en.wikipedia.org/wiki/Comparison_of_e-mail_clients]

इसके अलावा, मोबाइल उपकरणों पर अनुवाद कैसे होगा? इसलिए मुझे ऊपर से जवाब पसंद है:Long answer: you shouldn't.

यदि किसी के पास इस विषय में अधिक अंतर्दृष्टि है, तो कृपया मुझे सुधारने के लिए स्वतंत्र महसूस करें। धन्यवाद।

Answer 17

इसलिए यह वह नहीं है जो उपयोगकर्ता ढूंढ रहा था, लेकिन मुझे यह प्रश्न उत्तर की खोज में लगा और कुछ प्रकार के संबंधित के साथ आया। मेरे पास दोहराए जाने वाले तत्वों का एक गुच्छा था, जिनके भीतर एक टैब के लिए एक नए रंग / होवर की आवश्यकता थी। मैं हैंडलबार का उपयोग करता हूं, जो मेरे समाधान की कुंजी है, लेकिन अन्य टेम्प्लेटिंग भाषाएं भी काम कर सकती हैं।

मैंने कुछ रंगों को परिभाषित किया और उन्हें प्रत्येक तत्व के लिए हैंडलबार टेम्पलेट में पास किया। टेम्पलेट के शीर्ष पर मैंने एक शैली टैग को परिभाषित किया, और अपने कस्टम वर्ग और होवर रंग में डाल दिया।

<style type="text/css">
    .{{chart.type}}-tab-hover:hover {
        background-color: {{chart.chartPrimaryHighlight}} !important;
    }
</style>

फिर मैंने टेम्पलेट में शैली का उपयोग किया:

<span class="financial-aid-details-header-text {{chart.type}}-tab-hover">
   Payouts
</span>

आप की जरूरत नहीं हो सकती है !important

Answer 18

आप विभिन्न प्रकारों में एक कोड लिख सकते हैं

पहले मैं यह लिख सकता हूँ

एचटीएमएल

<a href="https://www.google.com/" onMouseOver="this.style.color='red'"
        onMouseOut="this.style.color='blue'" class="one">Hello siraj</a> 

सीएसएस

.one{
  text-decoration: none;
}

आप दूसरा तरीका आजमा सकते हैं

एचटीएमएल

<a href="https://www.google.com/" class="one">Hello siraj</a>

सीएसएस

.one{
text-decoration: none;
}

.one:hover{
color:blue;
}

.one:active{
color: red;
}

तुम भी jquery में मँडरा कोशिश कर सकते हैं

जावा स्क्रिप्ट

$(document).ready(function(){
  $("p").hover(function(){
    $(this).css("background-color", "yellow");
    }, function(){
    $(this).css("background-color", "pink");
  });
});

एचटीएमएल

<p>Hover the mouse pointer over this paragraph.</p>

इस कोड में आपके पास jquery में एक तीन फ़ंक्शन है। पहले आप एक फ़ंक्शन तैयार करते हैं जो jquery के फ़ंक्शन का मूल है, फिर दूसरे का इस फ़ंक्शन में एक हॉवर फ़ंक्शन होता है जब आप एक पॉइंटर को हॉवर करते हैं, तो पाठ को रंग बदल दिया जाएगा और फिर अगला जब आप पाठ को सूचक जारी करते हैं तो यह अलग रंग का होगा और यह तीसरा कार्य है

Comments

कृपया डुप्लिकेट उत्तर पोस्ट करने से बचें

— Simas Joneliunas

ओके सर सिमस-जोंलियुनास

— सिराज अहमद

इनमें से कोई भी दृष्टिकोण प्रश्न में व्यक्त समस्या को हल नहीं करता है। आप एक HTML स्वरूपित ईमेल में जेएस का उपयोग नहीं कर सकते हैं, और आपके द्वारा सुझाए गए अन्य दृष्टिकोण उन कक्षाओं का उपयोग करते हैं जो स्पष्ट रूप से खारिज किए जाते हैं।

— क्वेंटिन

Answer 19

यह अब Hacss के साथ संभव है ।

Answer 20

मुझे जावास्क्रिप्ट से बचना था, लेकिन सर्वर साइड कोड के साथ जा सकता था।

इसलिए मैंने एक आईडी बनाई, एक स्टाइल ब्लॉक बनाया, उस आईडी के साथ लिंक जेनरेट किया। हाँ इसके वैध एच.टी.एम.एल.

a {
  text-decoration: none;
  color: blue; 
}

a:hover {
  color: blue;
  font-weight: bold;
}

<!-- some code in the interpreter you use, to generate the data-hover id -->
<style>
  a[data-hover="rnd-id-123"] { color: green;  } 
  a[data-hover="rnd-id-123"]:hover { color: red; }
</style>
<a data-hover="rnd-id-123">some link 1</a>

<br>

<!-- some code in the interpreter you use, to generate the data-hover id -->
<style>
  a[data-hover="rnd-id-456"] { color: purple;  }
  a[data-hover="rnd-id-456"]:hover { color: orange; }
</style>
<a data-hover="rnd-id-456">some link 2</a>

Answer 21

आप छद्म वर्ग का उपयोग a:hoverकेवल बाहरी शैली की चादरों में कर सकते हैं । इसलिए मैं बाहरी स्टाइल शीट का उपयोग करने की सलाह देता हूं। कोड है:

a:hover {color:#FF00FF;}   /* Mouse-over link */

Comments

निश्चित रूप से आपको बाहरी शीट की आवश्यकता नहीं है, बस styleटैग का उपयोग करें ।

— दिमित्री जैतसेव

Answer 22

आप एक वर्ग जोड़कर आईडी बना सकते हैं लेकिन इनलाइन कभी नहीं।

<style>.hover_pointer{cursor:pointer;}</style>
<div class="hover_pointer" style="font:bold 12pt Verdana;">Hello World</div>

2 लाइनें लेकिन आप हर जगह कक्षा का फिर से उपयोग कर सकते हैं।

Answer 23

मेरी समस्या यह थी कि मैं एक ऐसी वेबसाइट बना रहा हूँ, जो बहुत सारे इमेज-आइकॉन का उपयोग करती है, जिन्हें होवर पर एक अलग इमेज द्वारा स्वैप किया जाना होता है (जैसे ब्लू-ईश इमेज, होवर पर रेड-ईश को चालू करना)। मैंने इसके लिए निम्न समाधान तैयार किया:

.container div {
  width: 100px;
  height: 100px;
  background-size: 100px 100px;
}
.container:hover .withoutHover {
  display: none;
}
.container .withHover {
  display: none;
}
.container:hover .withHover {
  display: block;
}

<p>Hover the image to see it switch with the other. Note that I deliberately used inline CSS because I decided it was the easiest and clearest solution for my problem that uses more of these image pairs (with different URL's).
</p>
<div class=container>
<div class=withHover style="background-image: url('https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQrqRsWFJ3492s0t0NmPEcpTQYTqNnH188R606cLOHm8H2pUGlH')"></div>
<div class=withoutHover style="background-image: url('http://i.telegraph.co.uk/multimedia/archive/03523/Cat-Photo-Bombs-fa_3523609b.jpg')"></div>
</div>

मैंने छवियों की जोड़ी वाले एक कंटेनर को पेश किया। पहला दिखाई दे रहा है और दूसरा छिपा हुआ है (प्रदर्शन: कोई नहीं)। कंटेनर को मँडराते समय, पहला छिप जाता है (प्रदर्शन: कोई नहीं) और दूसरा फिर से दिखाता है (प्रदर्शन: ब्लॉक)।