दिलचस्प पोस्ट
जावास्क्रिप्ट ऑनलोड इवेंट से प्रबंधन की विधि निष्पादित करें टॉमकेट सर्वर शुरू होने पर जावा क्लास (सर्वलेट नहीं) को कैसे लोड करना है Geom_bar ggplot2 में बार पुन: व्यवस्थित करें awk / sed: एक रिकर्सिव कैसे खोज / एक स्ट्रिंग की जगह है? डेस्कटॉप / एक्सप्लोरर पर खींचें और ड्रॉप करें ऑब्जेक्ट के लिए डिफ़ॉल्ट कार्यान्वयन। GetHashCode () jQuery कॉलबैक में अधिक पैरामीटर पास करें एचडब्ल्यू त्वरित गतिविधि – ओपनजीएल बनावट आकार की सीमा कैसे प्राप्त करें? एंड्रॉइड में मेरे एप्लिकेशन से केवल संदेश प्राप्त करने के लिए लॉगक फ़िल्टर करें? एस्प.net एमवीसी में विशेषता और jquery AJAX अधिकृत करें मैं जावास्क्रिप्ट के साथ सीकेएडिट में एक मान कैसे सेट करूं? जावा जांचें कि क्या दो आयत किसी भी बिंदु पर ओवरलैप हो ब्रॉडकास्ट रिसेवर को एक ईवेंट के लिए एक से अधिक समान संदेश प्राप्त होते हैं Android में पाठ के लिए छाया प्रभाव? फोर्किंग के बाद, वैश्विक चर साझा किए गए हैं?

कैसे एक मूल तत्व मँडरा जब माता पिता तत्व शैली करने के लिए?

मुझे पता है कि कोई सीएसएस अभिभावक चयनकर्ता मौजूद नहीं है, लेकिन क्या इस तरह के चयनकर्ता के बिना एक बच्चे तत्व को मँडरा करते समय एक parenting तत्व शैली संभव है?

एक उदाहरण देने के लिए: एक हटाए गए बटन पर विचार करें , जब हटाए जाने पर उस तत्व को उजागर किया जाएगा जो नष्ट होने वाला है:

<div> <p>Lorem ipsum ...</p> <button>Delete</button> </div> 

शुद्ध सीएसएस के माध्यम से, जब माउस बटन पर होता है तो इस खंड का पृष्ठभूमि रंग कैसे बदल सकता है?

Solutions Collecting From Web of "कैसे एक मूल तत्व मँडरा जब माता पिता तत्व शैली करने के लिए?"

खैर, इस सवाल से पहले कई बार पूछा जाता है, और संक्षिप्त ठेठ जवाब है: यह शुद्ध सीएसएस द्वारा नहीं किया जा सकता है। यह नाम पर है: कैस्केडिंग स्टाइल शीट्स केवल कैस्केडिंग दिशा में स्टाइल का समर्थन करती हैं, न कि ऊपर

लेकिन अधिकांश परिस्थितियों में, जहां इस प्रभाव की इच्छा की जाती है, जैसे दी गई उदाहरण में, वांछित प्रभाव तक पहुंचने के लिए इन कैस्केडिंग विशेषताओं का उपयोग करने की संभावना अभी भी है। इस छद्म मार्कअप पर विचार करें:

 <parent> <sibling></sibling> <child></child> </parent> 

यह चाल बहन को माता-पिता के रूप में समान आकार और स्थिति देना है और माता-पिता के बजाए भाई को शैली देना है। माता-पिता स्टाइल की तरह ये दिखेगा!

अब, भाई कैसे शैली बना सकता है?

जब बच्चे को रखा जाता है, तो माता पिता भी है, लेकिन भाई नहीं है। वही भाई के लिए जाता है इस भाई को स्टाइल करने के लिए तीन संभावित सीएसएस चयनकर्ता पथों में समाप्त होता है:

 parent sibling { } parent sibling:hover { } parent:hover sibling { } 

ये अलग-अलग पथ कुछ अच्छी संभावनाओं के लिए अनुमति देते हैं उदाहरण के लिए, इस बेकल में प्रश्न परिणामों में उदाहरण पर इस चाल को छोड़ देना:

 div {position: relative} div:hover {background: salmon} div p:hover {background: white} div p {padding-bottom: 26px} div button {position: absolute; bottom: 0} 

Style parent image example

जाहिर है, अधिकांश मामलों में, यह चाल माता पिता के रूप में एक ही आकार को भाई देने के लिए पूर्ण स्थिति के उपयोग पर निर्भर करता है, और फिर भी बच्चे को माता-पिता के भीतर प्रकट होने दें।

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

मुझे पता है कि यह एक पुराना सवाल है, लेकिन मैं सिर्फ एक छद्म बच्चे (लेकिन एक छद्म आवरण) के बिना ऐसा करने में कामयाब रहा हूं।

अगर आप माता-पिता को कोई pointer-events साथ नहीं सेट करते pointer-events , और फिर pointer-events को auto सेट करने के साथ एक बच्चा div , तो यह काम करता है 🙂
ध्यान दें कि <img> टैग (उदाहरण के लिए) चाल नहीं करता
साथ ही अन्य बच्चों के लिए auto लिए pointer-events सेट करना याद रखें, जिनके पास स्वयं के ईवेंट श्रोता हैं, या अन्यथा वे अपनी क्लिक कार्यक्षमता खो देंगे।

मार्कअप:

 <div_parent> <div_child></child> </parent> 

और सीएसएस:

 .div_parent { pointer-events: none; } .div_child { pointer-events: auto; } .div_parent:hover { opacity: 0.5; } 

संपादित करें:
छाया विज़ार्ड के रूप में कृपया ध्यान दें: यह उल्लेखनीय है कि ये IE10 और नीचे के लिए काम नहीं करेगा। (एफएफ और क्रोम के पुराने संस्करण भी, यहां देखें)

चयनित बच्चे के माता-पिता का चयन करने के लिए कोई सीएसएस चयनकर्ता नहीं है

आप जावास्क्रिप्ट के साथ ऐसा कर सकते हैं

जैसा कि पहले उल्लेख किया गया है "चयनित बच्चे के माता-पिता का चयन करने के लिए कोई सीएसएस चयनकर्ता नहीं है"।

तो आप या तो:

  • एनजीएलएन के उत्तर में वर्णित सीएसएस हैक का उपयोग करें
  • जावास्क्रिप्ट का उपयोग करें – साथ में jQuery की संभावना सबसे अधिक है

यहां जावास्क्रिप्ट / jQuery समाधान के लिए उदाहरण है

जावास्क्रिप्ट की ओर:

 $('#my-id-selector-00').on('mouseover', function(){ $(this).parent().addClass('is-hover'); }).on('mouseout', function(){ $(this).parent().removeClass('is-hover'); }) 

और सीएसएस पक्ष पर, आपके पास कुछ ऐसा होगा:

 .is-hover { background-color: red; } 

यह बहुत आसान है Sass में क्या करना है! इस के लिए जावास्क्रिप्ट में छिपाना मत करो। सास में और चयनकर्ता इस प्रकार ठीक उसी तरह से करता है।

http://thesassway.com/intermediate/referencing-parent-selectors-using-ampersand