कैसे लिखें: एक: पहले और एक: के बाद के लिए मंडराना हालत?

Question

कैसे लिखें :hoverऔर :visitedकिसके लिए शर्त a:before?

मैं कोशिश कर रहा हूं a:before:hoverलेकिन यह काम नहीं कर रहा है

Answer 1

यह इस बात पर निर्भर करता है कि आप वास्तव में क्या करने की कोशिश कर रहे हैं।

यदि आप बस एक :beforeछद्म तत्व से शैलियों को लागू करना चाहते हैं जब aतत्व एक छद्म वर्ग से मेल खाता है, तो आपको लिखने a:hover:beforeया a:visited:beforeइसके बजाय की आवश्यकता होगी । सूचना छद्म तत्व आता है के बाद (और वास्तव में, पूरे चयनकर्ता के अंत में) छद्म वर्ग। ध्यान दें कि वे दो अलग-अलग चीजें हैं; उन दोनों को "छद्म चयनकर्ता" कहकर पुकारना एक बार आपको भ्रमित कर देगा जब आप इस तरह के वाक्य रचना समस्याओं में भाग लेंगे।

यदि आप CSS3 लिख रहे हैं, तो आप इस अंतर को स्पष्ट करने के लिए डबल कॉलन के साथ एक छद्म तत्व को निरूपित कर सकते हैं। इसलिए, a:hover::beforeऔर a:visited::before। लेकिन अगर आप IE8 और पुराने जैसे लीगेसी ब्राउज़र के लिए विकसित कर रहे हैं, तो आप केवल ठीक कॉलन का उपयोग करके दूर हो सकते हैं।

छद्म वर्गों और छद्म तत्वों का यह विशिष्ट क्रम कल्पना में कहा गया है :

एक छद्म तत्व एक चयनकर्ता में सरल चयनकर्ताओं के अंतिम अनुक्रम में जोड़ा जा सकता है।

सरल चयनकर्ताओं का एक क्रम सरल चयनकर्ताओं की एक श्रृंखला है जो एक कॉम्बिनेटर द्वारा अलग नहीं किया जाता है। यह हमेशा एक प्रकार के चयनकर्ता या एक सार्वभौमिक चयनकर्ता के साथ शुरू होता है। अनुक्रम में किसी अन्य प्रकार के चयनकर्ता या सार्वभौमिक चयनकर्ता की अनुमति नहीं है।

एक साधारण चयनकर्ता या तो एक प्रकार का चयनकर्ता, सार्वभौमिक चयनकर्ता, विशेषता चयनकर्ता, वर्ग चयनकर्ता, आईडी चयनकर्ता या छद्म वर्ग होता है।

एक छद्म वर्ग एक साधारण चयनकर्ता है। एक छद्म तत्व, हालांकि, यह एक साधारण चयनकर्ता के समान नहीं है।

हालाँकि, उपयोगकर्ता-क्रिया छद्म-वर्गों जैसे कि :hover^{1 के लिए} , यदि आपको केवल तभी लागू करने के लिए इस प्रभाव की आवश्यकता होती है जब उपयोगकर्ता छद्म तत्व के साथ स्वयं संपर्क करता है लेकिन aतत्व नहीं है , तो यह कुछ अस्पष्ट लेआउट-निर्भर-निर्भरता के अलावा अन्य संभव नहीं है । जैसा कि पाठ द्वारा निहित है, मानक सीएसएस छद्म तत्वों में वर्तमान में छद्म कक्षाएं नहीं हो सकती हैं। उस स्थिति में, आपको :hoverछद्म तत्व के बजाय वास्तविक बाल तत्व पर आवेदन करना होगा ।

---

¹ _{बेशक, यह छद्म वर्गों को जोड़ने के लिए लागू नहीं होता है जैसे :visitedकि प्रश्न में, चूंकि छद्म तत्व लिंक नहीं हैं।}

Comments

यह ध्यान दिया जाना चाहिए कि जो मूल तत्व पर होवर डालता है - जिसके कारण सजावट को लागू करने का कारण बनता है: यदि छद्म के बाद माउस माउस के नीचे नहीं है, जब तक कि उसका मूल है।

— सैम्यूडी

यह भी ध्यान दिया जाना चाहिए कि लेआउट नियमों को निर्दिष्ट करने के तरीके के कारण कई चीजें हैं जो इसका जवाब नहीं देती हैं - जैसे text-decoration।

— क्रिस क्रिचो

@ क्रिस क्रिचो: वास्तव में - मैं वास्तव में इस विशेष मुद्दे के लिए एक स्पष्टीकरण के लिए हो रहा हूं, यहां छद्म तत्वों के संबंध में । बेशक, यह स्पष्ट करने योग्य है कि इस मुद्दे का छद्म वर्ग / छद्म तत्व चयनकर्ताओं के साथ कोई संबंध नहीं है , लेकिन जैसा कि आप बताते हैं, एक लेआउट मुद्दा है।

— BoltClock

@BoltClock मैंने इस टिप्पणी को छोड़ने के कुछ ही समय बाद उस उत्तर को बदल दिया। हुज़्ज़ाह।

— क्रिस क्रिचो

साइनल कोलन (:), छद्म वर्ग और दोहरे बृहदान्त्र को नामित करता है: (:) छद्म तत्वों को नामित करता है। तो यह होना चाहिए: मंडराना :: इससे पहले

— mikkelbreum

Answer 2

a:hover::beforeइसके बजाय लिखें a::before:hover: उदाहरण ।

Comments

@mikkelbreum क्या आपके पास यह साबित करने के लिए कोई संदर्भ है?

— शिया

@bungeshea: यह CSS3 सिंटैक्स है। मेरे जवाब के तहत टिप्पणियां (साथ ही मेरे हाल के संपादन) देखें। इसे "सही सिंटैक्स" कहना थोड़ा गलत है, क्योंकि CSS1 / 2 छद्म तत्वों के लिए सिंगल और डबल कॉलन दोनों की अनुमति है। मैं इसके बजाय अनुशंसित सिंटैक्स को कॉल करूंगा , क्योंकि आज केवल विरासत सिंटैक्स का उपयोग जारी रखने का एकमात्र कारण IE8 और पुराने का समर्थन करना है।

— BoltClock

@mikkelbreum @sheabunge सीएसएस 2 के बारे में अधिक जानकारी :afterबनाम CSS3 ::after developer.mozilla.org/en-US/docs/Web/CSS/::after (एकल :बेहतर समर्थन हासिल है)

— ट्रैविस

यह अंडरलाइन के लिए काम नहीं कर रहा है :( jsfiddle.net/poreshopowski/u5dhthvq कृपया यह भी प्रदर्शित करें: इनलाइन-ब्लॉक; jsfiddle.net/poreshopowski/u89fo4oq

— प्लस

Answer 3

माउसओवर पर मेनू लिंक के टेक्स्ट को बदलने के लिए। (होवर पर विभिन्न भाषा पाठ) यहाँ है

jsfiddle उदाहरण

एचटीएमएल:

<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:"ಕನ್ನಡ";
}

Comments

यह एक प्यारा जवाब है। वास्तव में, इसने मुझे रिप्लेसमेंट टेक्स्ट से मेल करने के लिए स्पान टेक्स्ट के फॉन्ट-साइज को बढ़ाकर अपनी फिडेल को थोड़ा बढ़ाने के लिए प्रेरित किया, रिप्लेसमेंट टेक्स्ट से पहले और बाद में 3 नॉन-ब्रेकिंग स्पेस को जोड़ा ताकि वे एक ही चौड़ाई पर कब्जा कर लें, और के a:hover::beforeसाथ स्टाइल किया गया है text-decoration: underline, जो रिप्लेसमेंट टेक्स्ट के लाल रंग को चुनने का कारण बनता है।

— डेव लैंड

Answer 4

यह काम wil का उपयोग करने .card-listing:hover::after hoverऔर afterउपयोग करने का प्रयास करें::

Answer 5

बोल्टकॉक का जवाब सही है। केवल एक चीज जो मैं जोड़ना चाहता हूं वह यह है कि यदि आप केवल छद्म तत्व का चयन करना चाहते हैं, तो एक स्पैन में डालें।

उदाहरण के लिए:

<li><span data-icon='u'></span> List Element </li>

के बजाय:

<li> data-icon='u' List Element</li>

इस तरह आप बस कह सकते हैं

ul [data-icon]:hover::before {color: #f7f7f7;}

जो केवल छद्म तत्व को उजागर करेगा, संपूर्ण ली तत्व को नहीं

Answer 6

जैसा कि मैंने इस कोड में किया है आप सही एक्शन ब्रैकेट (">") का उपयोग करके अपनी कार्रवाई को सिर्फ एक वर्ग तक सीमित कर सकते हैं:

<!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 वर्ग पर ही काम करता है