:hover और :visiteda:before के लिए स्थिति कैसे लिखें?कैसे लिखें: होवर स्थिति के लिए: पहले और एक: बाद में?
मैं a:before:hover कोशिश कर रहा हूँ, लेकिन यह आप वास्तव में क्या करने के लिए कोशिश कर रहे हैं क्या पर
यह निर्भर करता है काम नहीं कर रहा।
आप बस जब a तत्व एक छद्म वर्ग से मेल खाता है एक :before छद्म तत्व को शैलियों आवेदन करना चाहते हैं, तो आप a:hover:before या a:visited:before बजाय लिखने के लिए की जरूरत है। ध्यान दें कि छद्म-तत्व छद्म-वर्ग (और वास्तव में, पूरे चयनकर्ता के बहुत अंत में) के बाद आता है। ध्यान दें कि वे दो अलग-अलग चीजें हैं; एक बार जब आप सिंटैक्स समस्याओं में भाग लेते हैं तो उन्हें "छद्म चयनकर्ता" दोनों को बुलावा देने जा रहा है।
यदि आप CSS3 लिख रहे हैं, तो आप इस भेद को स्पष्ट करने के लिए डबल कॉलन के साथ एक छद्म तत्व को इंगित कर सकते हैं। इसलिए, a:hover::before और a:visited::before। लेकिन यदि आप आईई 8 और पुराने जैसे विरासत ब्राउज़र के लिए विकास कर रहे हैं, तो आप एकल कॉलन का उपयोग करके ठीक हो सकते हैं।
छद्म वर्गों और छद्म तत्वों की इस विशिष्ट क्रम spec में कहा गया है:
एक छद्म तत्व एक चयनकर्ता में सरल चयनकर्ताओं के अंतिम अनुक्रम के साथ जोड़ दिया जा सकता है।
ए सरल चयनकर्ताओं का अनुक्रम सरल चयनकर्ताओं की एक श्रृंखला है जो एक संयोजक द्वारा अलग नहीं होते हैं। यह हमेशा एक प्रकार के चयनकर्ता या सार्वभौमिक चयनकर्ता के साथ शुरू होता है। अनुक्रम में कोई अन्य प्रकार चयनकर्ता या सार्वभौमिक चयनकर्ता की अनुमति नहीं है।
ए सरल चयनकर्ता या तो एक प्रकार का चयनकर्ता, सार्वभौमिक चयनकर्ता, विशेषता चयनकर्ता, कक्षा चयनकर्ता, आईडी चयनकर्ता, या छद्म वर्ग है।
एक छद्म-वर्ग एक साधारण चयनकर्ता है। एक छद्म तत्व, हालांकि, यह एक साधारण चयनकर्ता जैसा दिखता है, भले ही नहीं है।
हालांकि, उपयोगकर्ता के कार्रवाई छद्म कक्षाएं ऐसे :hover रूप , लागू करने के लिए यदि आप इस आशय की जरूरत के लिए केवल जब उपयोगकर्ता छद्म तत्व में ही नहीं बल्कि a तत्व के साथ सूचना का आदान प्रदान, तो यह नहीं है कुछ अस्पष्ट लेआउट-निर्भर वर्कअराउंड के अलावा अन्य संभव है। जैसा कि पाठ द्वारा निहित किया गया है, मानक सीएसएस छद्म-तत्वों में वर्तमान में छद्म-वर्ग नहीं हो सकते हैं। उस स्थिति में, आपको छद्म-तत्व के बजाय :hover को वास्तविक बाल तत्व पर लागू करने की आवश्यकता होगी।
बेशक, इस तरह के :visited के रूप में प्रश्न में के रूप में छद्म वर्गों से जोड़ने के लिए, के बाद से छद्म तत्वों लिंक नहीं हैं लागू नहीं होता।
a::before:hover: example के बजाय a:hover::before लिखें।
सही वाक्यविन्यास एक होगा: होवर :: – mikkelbreum
@mikkelbreum से पहले क्या आपको यह साबित करने का संदर्भ है? – shea
@ बंगेशिया: वह CSS3 वाक्यविन्यास है। मेरे उत्तर के साथ टिप्पणियां देखें (साथ ही साथ मेरा हालिया संपादन)। यह सही वाक्यविन्यास कहने के लिए थोड़ा गलत है हालांकि सीएसएस 1/2 छद्म-तत्वों के लिए एकल और डबल कॉलन दोनों की अनुमति है। मैं इसे * अनुशंसित * वाक्यविन्यास कहूंगा, क्योंकि आज विरासत वाक्यविन्यास का उपयोग जारी रखने का एकमात्र कारण IE8 और पुराने का समर्थन करने के लिए है। – BoltClock
माउसओवर पर मेनू लिंक के टेक्स्ट को बदलने के लिए।(हॉवर पर अलग-अलग भाषा पाठ) यहाँ
एचटीएमएल है:
<a align="center" href="#"><span>kannada</span></a>
सीएसएस:
span {
font-size:12px;
}
a {
color:green;
}
a:hover span {
display:none;
}
a:hover:before {
color:red;
font-size:24px;
content:"ಕನ್ನಡ";
}
यह एक सुंदर जवाब है। वास्तव में, यह मुझे प्रतिस्थापन पाठ से मेल खाने के लिए 24px तक स्पैन टेक्स्ट के फ़ॉन्ट आकार को बढ़ाकर [अपने fiddle थोड़ा बढ़ाएं] (http://jsfiddle.net/YSgKL/784/) को प्रेरित करता है, 3 गैर जोड़ा प्रतिस्थापन पाठ से पहले और बाद में रिक्त स्थान - ताकि वे एक ही चौड़ाई पर कब्जा कर सकें, और 'ए: होवर :: पहले 'टेक्स्ट-सजावट: अंडरलाइन' के साथ स्टाइल हो, जिससे अंडरलाइन प्रतिस्थापन टेक्स्ट का लाल रंग उठा सके । –
तुम भी बस का उपयोग करने के एक वर्ग अपनी कार्रवाई सीमित कर सकते हैं दाएं पॉइंट ब्रैकेट (">"), जैसा कि मैंने इस कोड में किया है:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
span {
font-size:12px;
}
a {
color:green;
}
.test1>a:hover span {
display:none;
}
.test1>a:hover:before {
color:red;
content:"Apple";
}
</style>
</head>
<body>
<div class="test1">
<a href="#"><span>Google</span></a>
</div>
<div class="test2">
<a href="#"><span>Apple</span></a>
</div>
</body>
</html>
नोट: मंडराना: से पहले स्विच .test1 वर्ग
पर ही काम करता है BoltClock के जवाब सही है। केवल एक चीज जिसे मैं जोड़ना चाहता हूं वह यह है कि यदि आप केवल छद्म तत्व का चयन करना चाहते हैं, तो एक अवधि में रखें।
उदाहरण के लिए:
<li><span data-icon='u'></span> List Element </li>
के बजाय:
<li> data-icon='u' List Element</li>
इस तरह से आप को बोल सकते हैं
ul [data-icon]:hover::before {color: #f7f7f7;}
जो केवल छद्म तत्व पर प्रकाश डाला जाएगा, नहीं पूरे li तत्व
यह काम wil
ऐसा नहीं है कि कि पेरेंट तत्व पर मंडराना डालता ने बताया जाना चाहिए
::का उपयोग कर.card-listing:hover::afterhoverऔरafterउपयोग करने के लिए प्रयास करें - जो सजावट भले ही लागू किया जा करने का कारण बनता :: के बाद pseudoelement माउस के तहत नहीं है , जब तक इसके माता-पिता हैं। – SamGoodyयह भी ध्यान दिया जाना चाहिए कि लेआउट नियम निर्दिष्ट किए जाने के कारण कई चीजें हैं जो * इसका जवाब नहीं देती हैं - उदा। 'पाठ decoration'। –
@ क्रिस क्रिचो: वास्तव में - मुझे वास्तव में छद्म तत्वों [यहां] के संबंध में इस विशिष्ट मुद्दे के लिए स्पष्टीकरण होता है (http://stackoverflow.com/questions/11474780/hoverbefore-text-decoration-none-has- कोई प्रभाव/11481121 # 11481121)। बेशक, यह स्पष्ट करने योग्य है कि इस मुद्दे के पास छद्म-वर्ग/छद्म-तत्व * चयनकर्ता * के साथ कोई संबंध नहीं है, लेकिन जैसा कि आप इंगित करते हैं, एक लेआउट समस्या है। – BoltClock