बाल तत्व को मँडराते समय मूल तत्व को कैसे स्टाइल करें?

Question

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

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

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

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

Comments

एक सीएसएस माता-पिता चयनकर्ता

— टायलरएच

संभावित समाधान: stackoverflow.com/q/39374918/3597276

— माइकल बेंजामिन

Answer 1

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

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

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

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

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

Comments

यह हाइलाइटिंग के लिए अच्छा है, लेकिन यदि आप फ़ॉन्ट रंग बदलने की कोशिश करते हैं, तो क्या मैं सही हूं?

— जहानज़ेब खान

@JahanzebKhan फ़ॉन्ट रंग बदलना कोई समस्या नहीं है ।

— NGLN

Answer 2

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

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

div.parent {  
    pointer-events: none;
}

div.child {
    pointer-events: auto;
}

div.parent:hover {
    background: yellow;
}    

<div class="parent">
  parent - you can hover over here and it won't trigger
  <div class="child">hover over the child instead!</div>
</div>

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

Comments

इस बात का उल्लेख IE10 और नीचे के लिए काम नहीं करेगा। (FF और Chrome के पुराने संस्करण भी, यहां देखें )

— शैडो विजार्ड ईयर फॉर यू

सूचक घटनाओं को किसी पर सेट करने का मतलब यह भी नहीं है कि उस तत्व के श्रोता काम नहीं करेंगे ..!

— रागेन

@ श्रजन आप बिल्कुल सही हैं। हालांकि मेरे अनुभव से यह उपयोग आमतौर पर एक क्लिक क्षेत्र / तत्व से जुड़ा है, इसलिए आप क्लिक श्रोता को अभिभावक को सौंप सकते हैं

— guy_m

कैसे के बारे में अगर मेरे पास दो-स्तरीय, माता-पिता, चाइल्ड 1 और चाइल्ड 1 का बच्चा है। मैंने अभिभावक-घटनाओं को माता-पिता और बच्चे के लिए पॉइंटर-ईवेंट ऑटो में नहीं जोड़ा। मैं बच्चे के बच्चे को छोड़कर 1 बच्चे को हॉवर करना चाहता हूं। 1. डेमो यहां: codepen.io/lion5893/pen/WNQgyVx

— Nam Lê Quý

Answer 3

एक और, सरल दृष्टिकोण (एक पुराने प्रश्न के लिए) ..
तत्वों को भाई-बहन और उपयोग के रूप में रखना होगा:

आसन्न सिब्लिंग सिलेक्टर ( +) या जनरल सिबलिंग सिलेक्टर ( ~)

<div id="parent">
  <!-- control should come before the target... think "cascading" ! -->
  <button id="control">Hover Me!</button>
  <div id="target">I'm hovered too!</div>
</div>

#parent {
  position: relative;
  height: 100px;
}

/* Move button control to bottom. */
#control {
  position: absolute;
  bottom: 0;
}

#control:hover ~ #target {
  background: red;
}

यहां डेमो फिडल ।

Comments

यह ध्यान देने योग्य है कि यह केवल काम करता है #targets DOM में #control के बाद आता है (यानी आप पिछले भाई-बहनों को प्रभावित नहीं कर सकते, केवल निम्नलिखित भाई-बहन)

— Gio

Answer 4

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

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

Comments

सच। $ (बच्चे) .hover (फ़ंक्शन () {$ (यह) .closest (parentSelector) .addClass ('hoverClass')}, फ़ंक्शन () {$ (यह) .closest (parentSelector) .removeClass ('hoverClass') कुछ ऐसा है। )});

— आमिर अफरीदी

@AamirAfridi हालांकि यह शुद्ध JS नहीं है, आपको इसके साथ jQuery का उपयोग करना होगा।

— Ivotje50

Answer 5

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

तो आप या तो:

• NGLN के उत्तर में वर्णित सीएसएस हैक का उपयोग करें
• जावास्क्रिप्ट का उपयोग करें - 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;
}

Answer 6

यह समाधान पूरी तरह से डिजाइन पर निर्भर करता है, लेकिन अगर आपके पास माता-पिता का डिव है, तो आप उस पृष्ठभूमि को बदलना चाहते हैं जब एक बच्चे को मँडराते हुए आप माता-पिता के साथ नकल करने की कोशिश कर सकते हैं ::after/ ::before।

<div class="item">
    design <span class="icon-cross">x</span>
</div>

सीएसएस:

.item {
    background: blue;
    border-radius: 10px;
    position: relative;
    z-index: 1;
}
.item span.icon-cross:hover::after {
    background: DodgerBlue;
    border-radius: 10px;
    display: block;
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    content: "";
}

एक पूरी बेला उदाहरण यहाँ देखें

Answer 7

शुद्ध सीएसएस समाधान की जरूरत नहीं है, जो उन लोगों के लिए एक सरल jquery समाधान:

    $(".letter").hover(function() {
      $(this).closest("#word").toggleClass("hovered")
    });

.hovered {
  background-color: lightblue;
}

.letter {
  margin: 20px;
  background: lightgray;
}

.letter:hover {
  background: grey;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="word">
  <div class="letter">T</div>
  <div class="letter">E</div>
  <div class="letter">S</div>
  <div class="letter">T</div>
</div>

Answer 8

सास में ऐसा करना बेहद आसान है! इसके लिए जावास्क्रिप्ट में न डालें। Sass में चयनकर्ता बिल्कुल यही करता है।

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

Comments

-1 सैस सीएसएस में अधिक कार्यक्षमता नहीं जोड़ता है, यह सिर्फ लिखना आसान बनाता है। आप sass में कुछ भी कर सकते हैं css और Visa versa में किया जा सकता है।

— दस्तूर

@ दास्तान चर और मिश्रण को देखते हुए, मैं कहूंगा कि सैस सीएसएस में एक बहुत कुछ जोड़ता है। आप यह सब CSS में कर सकते हैं, उसी तरह आप सादे पुराने सी। का उपयोग करते हुए भी परिष्कृत सॉफ्टवेयर लिख सकते हैं। आधुनिक भाषाएं बिना कुछ सक्षम किए बहुत कुछ जोड़ देती हैं जो पहले नहीं किया जा सकता था। सास और सीएसएस के साथ भी।

— कोबस क्रूगर

@Cobus क्रूगर आपका आंशिक रूप से सही है, लेकिन आप वह तुलना नहीं कर सकते। जबकि c ++ c # और जावास्क्रिप्ट जैसी भाषाएं C से आधारित हो सकती हैं, वे रनटाइम से पहले C में नहीं बदल जाती हैं। Sass को रनटाइम से पहले css में बदल दिया जाता है इसलिए आपका कभी भी एक sass स्टाइलशीट लोड नहीं होता है, बस एक css होता है।

— दस्तूर