दिलचस्प पोस्ट
pg_views पर क्वेरी से अधूरी जानकारी मैं स्विफ्ट में एक सरणी कैसे बदलूं? iTextSharp एक पाद लेख पृष्ठ # के # जूलिया: जूलिया में एक अन्य प्रोसेसर को डेटा कैसे कॉपी करें एक सरणी में अद्वितीय मान कैसे प्राप्त करें WebBrowser_DocumentCompleted क्यों है () दो बार फ़ायरिंग? जावा का उपयोग करते हुए DOM ट्री पर HTML फ़ाइल पढ़ना JSON ऑब्जेक्ट स्ट्रिंग से सी # क्लास फ़ाइल को स्वत: जनरेट कैसे करें PHP के साथ जीसीएम (Google क्लाउड मेसेजिंग) फ़ाइल या विधानसभा को लोड नहीं किया जा सका 'सिस्टम। वेब। एचटीपी 4.0.0 अपडेट के बाद 2012 से 2013 तक संरेखित करें-स्व, संरेखित-आइटम और संरेखित-सामग्री के साथ फ्लेक्स-रैप काम कैसे करता है? एक NSView के लिए पृष्ठभूमि का रंग बदलने का सबसे अच्छा तरीका शामिल करते समय 2100 पैरामीटर सीमा (SQL सर्वर) को मारना पैकेज के भीतर मॉड्यूल के सदस्यों को कैसे आयात करें "PKIX पथ बिल्डिंग असफल" और "अनुरोधित लक्ष्य के लिए मान्य प्रमाणीकरण पथ खोजने में असमर्थ"

जब एक डिवीज को रखा जाता है तो अन्य तत्वों को कैसे प्रभावित किया जाए

मुझे लगता है कि यह एक बहुत ही बुनियादी सवाल है, लेकिन मुझे यकीन नहीं है कि यह कैसे किया जा सकता है।

मैं क्या करना चाहता हूं, जब एक निश्चित div ब्लॉक होता है, यह दूसरे div के गुणों को प्रभावित करता है

उदाहरण के लिए, इस सरल उदाहरण में , जब आप #cube पर होवर करते हैं तो यह background-color बदलता है, लेकिन मुझे क्या चाहिए कि जब मैं #container हॉवर कर देता हूं, #cube प्रभावित होता है

 div { outline: 1px solid red; } #container { width: 200px; height: 30px; } #cube { width: 30px; height: 100%; background-color: red; } #cube:hover { width: 30px; height: 100%; background-color: blue; } 
 <div id="container"> <div id="cube"> </div> </div> 

वेब के समाधान से एकत्रित समाधान "जब एक डिवीज को रखा जाता है तो अन्य तत्वों को कैसे प्रभावित किया जाए"

यदि क्यूब सीधे कंटेनर के अंदर है:

 #container:hover > #cube { background-color: yellow; } 

यदि क्यूब कंटेनर के पास है (कंटेनर समापन टैग के बाद):

 #container:hover + #cube { background-color: yellow; } 

यदि क्यूब कंटेनर के अंदर कहीं है:

 #container:hover #cube { background-color: yellow; } 

यदि क्यूब कंटेनर का एक भाई है:

 #container:hover ~ #cube { background-color: yellow; } 

इस विशेष उदाहरण में, आप इसका उपयोग कर सकते हैं:

 #container:hover #cube { background-color: yellow; } 

यह केवल काम करता है क्योंकि cube container बच्चा है अधिक जटिल परिदृश्यों के लिए, आपको जावास्क्रिप्ट का उपयोग करना होगा।

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

सिग्नल बार रेटिंग विजेट

यह वास्तव में सीएसएस फ्लेक्सबॉक्स मॉडल का उपयोग करके आसानी से किया जा सकता है, जिससे reverse करने के लिए flex-direction सेट हो जाती reverse , ताकि तत्वों को विपरीत क्रम में प्रदर्शित किया जा सके, जो वे DOM में हैं ऊपर दिए गए स्क्रीनशॉट ऐसे विजेट से है, जिसे शुद्ध सीएसएस के साथ लागू किया गया है।

फ्लेक्सबॉक्स बहुत ही आधुनिक ब्राउज़रों का 95% का समर्थन करता है।

 .rating { display: flex; flex-direction: row-reverse; width: 9rem; } .rating div { flex: 1; align-self: flex-end; background-color: black; border: 0.1rem solid white; } .rating div:hover { background-color: lightblue; } .rating div[data-rating="1"] { height: 5rem; } .rating div[data-rating="2"] { height: 4rem; } .rating div[data-rating="3"] { height: 3rem; } .rating div[data-rating="4"] { height: 2rem; } .rating div[data-rating="5"] { height: 1rem; } .rating div:hover ~ div { background-color: lightblue; } 
 <div class="rating"> <div data-rating="1"></div> <div data-rating="2"></div> <div data-rating="3"></div> <div data-rating="4"></div> <div data-rating="5"></div> </div> 

उनके सहायक पदों के लिए माइक और रॉबर्ट के लिए बहुत बड़ा धन्यवाद!

यदि आपके पास अपने HTML में दो तत्व हैं और आप चाहते हैं :hover एक पर :hover और अन्य में एक शैली में बदलाव का लक्ष्य दो तत्वों को सीधे संबंधित होना चाहिए – माता-पिता, बच्चों या भाई बहन इसका अर्थ है कि दोनों तत्व एक दूसरे के अंदर हो सकते हैं या दोनों एक ही बड़े तत्व के भीतर समाहित हो सकते हैं।

मैं ब्राउज़र के दाईं ओर स्थित बॉक्स में परिभाषाएं दिखाना चाहता था क्योंकि मेरे उपयोगकर्ता मेरी साइट के माध्यम से पढ़ते हैं और :hover हाइलाइट किए गए नियमों पर :hover ; इसलिए, मैं 'परिभाषा' तत्व को 'पाठ' तत्व के अंदर प्रदर्शित नहीं करना चाहता था

मैं लगभग छोड़ दिया और बस मेरे पृष्ठ पर जावास्क्रिप्ट जोड़ा है, लेकिन यह भविष्य डांग है! हमें सीएसएस और एचटीएमएल से पीठों की सांस लेने की ज़रूरत नहीं होनी चाहिए कि हमें अपने प्रभावों को हासिल करने के लिए हमारे तत्वों को कहाँ रखा है! अंत में हमने समझौता किया

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

एचटीएमएल:

 <div id="explainBox" class="explainBox"> /*Common parent*/ <a class="defP" id="light" href="http://en.wikipedia.or/wiki/Light">Light /*highlighted term in text*/ </a> is as ubiquitous as it is mysterious. /*plain text*/ <div id="definitions"> /*Container for :hover-displayed definitions*/ <p class="def" id="light"> /*example definition entry*/ Light: <br/>Short Answer: The type of energy you see </p> </div> </div> 

सीएसएस:

 /*read: "when user hovers over #light somewhere inside #explainBox set display to inline-block for #light directly inside of #definitions.*/ #explainBox #light:hover~#definitions>#light { display: inline-block; } .def { display: none; } #definitions { background-color: black; position: fixed; /*position attribute*/ top: 5em; /*position attribute*/ right: 2em; /*position attribute*/ width: 20em; height: 30em; border: 1px solid orange; border-radius: 12px; padding: 10px; } 

इस उदाहरण में #explainBox भीतर किसी तत्व से :hover कमांड का लक्ष्य #explainBox होना चाहिए या #explainBox भीतर भी होना चाहिए #explainBox लिए निर्दिष्ट स्थिति विशेषताएँ इसे वांछित स्थान ( #explainBox बाहर) में प्रकट करने के लिए बाध्य करती हैं, हालांकि यह तकनीकी रूप से HTML दस्तावेज़ के भीतर एक अवांछित स्थिति में स्थित है।

मैं समझता हूं कि एक ही से अधिक HTML तत्व के लिए समान #id का उपयोग करने के लिए खराब फ़ॉर्म माना जाता है; हालांकि, इस मामले में #light के उदाहरणों को स्वतंत्र रूप से उनके संबंधित पदों के कारण स्वतंत्र रूप से वर्णित किया जा सकता है। क्या इस मामले में id #light को दोहराने के लिए कोई कारण नहीं है?

केवल यह मेरे लिए काम किया है:

 #container:hover .cube { background-color: yellow; } 

जहां #cube का CssClass है।

फ़ायरफ़ॉक्स , क्रोम और एज में परीक्षण किया गया