मैं एक स्क्रीन उत्पन्न करने की कोशिश कर रहा था जिसमें :before और :after छद्म तत्वों का उपयोग किया जाता है, लेकिन मुझे आश्चर्य है कि ऐसी कार्यक्षमता वास्तव में संभव है या नहीं।एक छद्म तत्व को घुमाने पर, अन्य छद्म तत्व प्रकट होते हैं?
मेरे पास एक रैपर div है जो एक इनपुट के चारों ओर लपेटा गया है (इस रैपर पर pseudo element एस के लिए अनुमति देता है)।
कुछ की तरह:
+-----------------------------------+
| +-------------------------------+ |
| | | | <-- wrapper div
| +-------------------------------+ <-- input element
+-----------------------------------+
हालांकि, मैं एक छद्म तत्व div के बाद तैनात करने के लिए देख रहा था।
+-----------------------------------++-------+
| +-------------------------------+ | |¯¯¯| |
| | | | / |
| +-------------------------------+ | ! |<--pseudo element
+-----------------------------------++-------+
मैं इस छद्म तत्व को होवर करने में सक्षम होना चाहता था, और दूसरा छद्म तत्व दिखाई देता है।
.wrap {
position: relative;
height: 30px;
width: 200px;
display: inline-block;
}
.wrap input {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
.wrap:after {
content: "?";
position: absolute;
top: 0;
left: 100%;
height: 30px;
width: 30px;
font-size: 30px;
text-align: center;
}
.wrap:before {
content: "";
position: absolute;
top: 100%;
left: 0;
height: 60px;
width: 100%;
background: tomato;
opacity:0.2;
}<div class="wrap">
<input placeholder="input element" type="text" />
</div>ऊपर टुकड़ा डिजाइन से, वहाँ :before तत्व अपनी अपारदर्शिता बदलने जब मैं केवल :after तत्व मंडराना करने का एक तरीका है, और नहीं wrap div ही (ध्यान दें : एचटीएमएल नहीं बदला जा सकता है, इसलिए यह सवाल क्यों है)?
मैं की तरह कुछ उपयोग करने की कोशिश: 90% के लिए इनपुट की चौड़ाई बदलने के बाद
.wrap:not(input):hover:before{
, लेकिन यह एक फर्क
छद्म तत्वों को सरल चयनकर्ताओं के रूप में गिनने के लिए एक दिलचस्प मामला है ताकि कोई '.wrap: has (:: after: hover) :: पहले' जैसा कुछ कर सके। लेकिन हां ... – BoltClock
@ बोल्टक्लॉक है :: :: होवर 'चयनकर्ता स्तर 4 में मान्य है? अगर मुझे सही याद है, छद्म तत्वों में छद्म-वर्ग नहीं हो सकते हैं ... –
@ हाशम कोलामी: यह स्तर 4 में है। यह छद्म तत्व और छद्म वर्ग दोनों पर निर्भर करता है - कुछ संयोजन संभव हैं जबकि अन्य नहीं हैं।Http://dev.w3.org/csswg/selectors-4/#pseudo-elements देखें, जो कहता है "छद्म-तत्व फीचर रहित हैं, और इसलिए किसी अन्य चयनकर्ता द्वारा मिलान नहीं किया जा सकता है। वे व्याख्या को प्रभावित नहीं करते हैं स्ट्रक्चरल छद्म-वर्गों का मूल्यांकन किया जाता है, जिनका मूल्यांकन केवल वास्तविक तत्वों पर आधारित होता है। अन्य छद्म-वर्ग * * छद्म-तत्वों से मिलान कर सकते हैं, अन्यथा निर्दिष्ट किए जाने तक। " – BoltClock