इनलाइन शैली को कार्य करने के लिए: CSS में होवर करें

Question

मुझे पता है कि सीएसएस शैलियों को सीधे HTML टैग में एम्बेड करना वे सीएसएस के उद्देश्य को बहुत अधिक प्रभावित करते हैं, लेकिन कभी-कभी यह डीबगिंग उद्देश्यों के लिए उपयोगी होता है, जैसे:

<p style="font-size: 24px">asdf</p>

नियम को एम्बेड करने के लिए सिंटैक्स क्या है:

a:hover {text-decoration: underline;}

एक टैग की शैली विशेषता में? यह स्पष्ट रूप से यह नहीं है ...

<a href="foo" style="text-decoration: underline">bar</a>

... चूंकि यह हर समय लागू होता है, जैसा कि होवर के दौरान विरोध किया गया था।

Comments

सैद्धांतिक रूप से, यदि आप होवर को कुछ गतिशील बनाने की कोशिश कर रहे हैं, तो आप मौजूदा शीट की विंडो.कम्पाटमेंट.स्टाइलशीट सूची का उपयोग करके एक हॉवर नियम को हॉवर नियम को इंजेक्ट करने के लिए जावास्क्रिप्ट का उपयोग कर सकते हैं।

— 21

यह भी देखें stackoverflow.com/questions/5293280/…

— rogerdpack

Answer 1

मुझे डर है कि यह नहीं किया जा सकता है, छद्म श्रेणी के चयनकर्ताओं को इन-लाइन सेट नहीं किया जा सकता है, आपको इसे पृष्ठ पर या स्टाइलशीट पर करना होगा।

मुझे यह उल्लेख करना चाहिए कि तकनीकी रूप से आपको इसे सीएसएस युक्ति के अनुसार करने में सक्षम होना चाहिए , लेकिन अधिकांश ब्राउज़र इसका समर्थन नहीं करते हैं

संपादित करें: मैंने इसके साथ एक त्वरित परीक्षण किया:

<a href="test.html" style="{color: blue; background: white} 
            :visited {color: green}
            :hover {background: yellow}
            :visited:hover {color: purple}">Test</a>

और यह IE7, IE8 बीटा 2, फ़ायरफ़ॉक्स या क्रोम में काम नहीं करता है। क्या कोई और किसी भी अन्य ब्राउज़रों में परीक्षण कर सकता है?

Comments

यह बहुत ही कम प्राथमिकता वाला सीएसएस 3 वर्किंग ड्राफ्ट है जिसे छह साल में अपडेट नहीं किया गया है। युक्ति से: 'W3C वर्किंग ड्राफ्ट को संदर्भ सामग्री के रूप में उपयोग करना या उन्हें "कार्य प्रगति पर" के अलावा अन्य के रूप में उद्धृत करना अनुचित है। " '

— जिम

यह सच है, लेकिन ब्राउज़रों कुछ CSS3 के नियमों को लागू करते हैं, ऐसा करना चाहिए शायद इस संदर्भ में गलत शब्द है

— ग्लेन स्लावेन

ब्राउज़र आमतौर पर सीएसएस सुविधाओं को लागू करते हैं जो एक और विकास की स्थिति में होते हैं, जैसे कि अस्पष्टता सीएसएस रंग (अंतिम कॉल) से है और मीडिया क्वेरी एक उम्मीदवार सिफारिश है।

— जिम

स्टाइल नहीं होगा = ": होवर {}" स्टाइलशीट में "ए {: होवर {}}" के बराबर होगा? यह स्पष्ट रूप से एक वाक्यविन्यास त्रुटि है।

— कोर्नेल

यह उत्तर बहुत समय पहले पोस्ट किया गया था, तब से चीजें बदल गई हैं और प्रासंगिक डब्ल्यू 3 सी कल्पना के वर्तमान संस्करण - सीएसएस स्टाइल एट्रीब्यूट रिक। ( w3.org/TR/css-style-attr/#syntax ) - स्पष्ट रूप से कहता है कि शैली विशेषता में केवल CSS घोषणा ब्लॉक की सामग्री हो सकती है। इसलिए अब छद्म तत्वों को styleविशेषता के साथ सम्मिलित करना असंभव है ।

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

Answer 2

यदि आप केवल डिबगिंग कर रहे हैं, तो आप css को संशोधित करने के लिए जावास्क्रिप्ट का उपयोग कर सकते हैं:

<a onmouseover="this.style.textDecoration='underline';" 
    onmouseout="this.style.textDecoration='none';">bar</a>

Comments

जेएसएफ के साथ एक समाधान के लिए खोज की और इससे मुझे इसे ठीक करने में मदद मिली। onmousemove = "this.style.color = '## {cc.attrs.color}'," onmouseout = "this.style.color 'सफेद' =,"

— kdoteu

Answer 3

यदि यह डीबगिंग के लिए है, तो होवरिंग के लिए बस एक सीएसएस क्लास जोड़ें (चूंकि तत्वों में एक से अधिक वर्ग हो सकते हैं):

a.hovertest:hover
{
text-decoration:underline;
}

<a href="http://example.com" class="foo bar hovertest">blah</a>

Comments

यह संभवत: निकटतम है जिसे आप वांछित प्रभाव के लिए प्राप्त करने जा रहे हैं

— ग्लेन स्लावेन

Answer 4

एक सरल उपाय:

   <a href="#" onmouseover="this.style.color='orange';" onmouseout="this.style.color='';">My Link</a>

या

<script>
 /** Change the style **/
 function overStyle(object){
    object.style.color = 'orange';
    // Change some other properties ...
 }

 /** Restores the style **/
 function outStyle(object){
    object.style.color = 'orange';
    // Restore the rest ...
 }
</script>

<a href="#" onmouseover="overStyle(this)" onmouseout="outStyle(this)">My Link</a>

Answer 5

मैं किसी के लिए एक त्वरित समाधान के बिना एक साथ समाधान के बिना hover पॉपअप बनाने के लिए onmouseover और onmouseout व्यवहार का उपयोग करना चाहते हैं।

http://jsfiddle.net/Lk9w1mkv/

<div style="position:relative;width:100px;background:#ddffdd;overflow:hidden;" onmouseover="this.style.overflow='';" onmouseout="this.style.overflow='hidden';">first hover<div style="width:100px;position:absolute;top:5px;left:110px;background:white;border:1px solid gray;">stuff inside</div></div>

Answer 6

यदि वह <p>टैग जावास्क्रिप्ट से बनाया गया है, तो आपके पास एक और विकल्प है: JSS का उपयोग प्रोग्रामहाइटी में डॉक्यूमेंट हेड में सम्मिलित करने के लिए करें। यह समर्थन करता है '&:hover'। https://cssinjs.org/

Answer 7

मुझे नहीं लगता कि jQuery छद्म चयनकर्ताओं का समर्थन करता है, लेकिन यह एक ही पृष्ठ पर एक, कई, या आपके सभी समान नियंत्रणों और टैग में घटनाओं को जोड़ने का एक त्वरित तरीका प्रदान करता है।

सभी के सर्वश्रेष्ठ, आप इवेंट बाइंड को चेन कर सकते हैं और यदि चाहें तो स्क्रिप्ट की एक लाइन में यह सब कर सकते हैं। स्वयं को चालू या बंद करने के लिए सभी HTML को मैन्युअल रूप से संपादित करने की तुलना में बहुत आसान है। फिर से, चूंकि आप सीएसएस में वही कर सकते हैं, मुझे नहीं पता कि यह आपको कुछ भी खरीदता है (jQuery सीखने के अलावा)।