चाइल्ड होवर पर पैरेंट कंटेनर का पृष्ठभूमि रंग बदलें (केवल सीएसएस)

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

पॉइंटर-इवेंट और होवर:

इस प्रभाव को प्राप्त करने के लिए, हम सूचक घटनाओं और :hover छद्म वर्ग में हेरफेर कर सकते हैं:

1. सेट सूचक-घटनाएँ: माता-पिता पर कोई नहीं। यह मूल तत्व को किसी भी होवर ईवेंट प्राप्त करने से रोकता है।
2. होवर पर वांछित मूल पृष्ठभूमि रंग परिवर्तन को परिभाषित करें। ]बच्चे पर पॉइंटर-इवेंट: ऑटो सेट करें।
यह बच्चे के तत्व को होवर इवेंट को ट्रिगर करने की अनुमति देता है, भले ही माता-पिता इसे अनदेखा कर दें उन्हें।
उदाहरण:

div { ऊंचाई: 200px; चौड़ाई: 200px; पाठ-संरेखण: केंद्र; सूचक-घटनाएँ: कोई नहीं; } div: होवर { पृष्ठभूमि: #F00; } डिव > ए { सूचक-घटनाएँ: ऑटो; }

div {
  height: 200px;
  width: 200px;
  text-align: center;
  pointer-events: none;
}
div:hover {
  background: #F00;
}
div > a {
  pointer-events: auto;
}