इनलाइन शैली के रूप में कार्य करने के लिए: सीएसएस

Question

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

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

एक का एक टैग शैली विशेषता में

a:hover {text-decoration: underline;} 

:

जैसा कोई नियम एम्बेड करने के लिए वाक्य रचना क्या है? यह स्पष्ट रूप से यह नहीं है ...

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

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

Answer 1

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

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

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

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

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

Answer 2

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

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

Answer 3

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

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

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

Answer 4

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

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

Answer 5

एक सरल समाधान:

<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 6

मैं एक साथ 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>