शुद्ध सीएसएस

Question

में नए होवर पर चल रहे संक्रमण को समाप्त करना मैं शुद्ध सीएसएस में एक चल रहे संक्रमण को समाप्त करने (ओवरराइट) करने की कोशिश कर रहा हूं। सीएसएस-कोड जो ओवरराइट करने का प्रयास करता है काम नहीं करता है; यह सिर्फ अनदेखा नहीं किया गया है और मैं व्यवहार की व्याख्या नहीं कर सकता।

नीचे एक उदाहरण-कोड है जिसमें 3 लिंक प्रत्येक के बाद 1 div है। परीक्षण के लिए 3 और div बाद में जोड़े गए हैं।

div { 
 
    background-color: white; 
 
    width: 50px; 
 
    transition: all; 
 
    transition-delay: 1s; 
 
} 
 
a:hover ~ div { 
 
    width: 50px; 
 
    color: red; 
 
} 
 
a:hover + div { 
 
    width: 100px; 
 
    transition-delay: 0s; 
 
}

<a>link 1</a> 
 
<div>text 1</div> 
 
<a>link 2</a> 
 
<div>tekst 2</div> 
 
<a>link 3</a> 
 
<div>tekst 3</div> 
 
<div>tekst 4</div> 
 
<div>tekst 5</div> 
 
<div>tekst 6</div>

• एक लिंक पर हॉवर पर, केवल पहले निम्नलिखित div+ चयनकर्ता की वजह से चौड़ाई में बदल जाता है।

• संक्रमण-देरी इस होवर को 1 एस अतिरिक्त के लिए रखती है।

मुद्दा अब जब एक नया मंडराना होता है, मैं चाहता हूँ कि बक्से को समाप्त करने के बाद सभी पर सभी मंडराना प्रभाव है। इसे मेनू के रूप में सोचें; जब एक नया मेन्यूपॉइंट होवर करता है, तो मैं चाहता हूं कि अन्य सभी सबमेनस बंद हो जाएं और केवल एक को खोलने के लिए।

• आशा ~ चयनकर्ता के साथ था वापस सामान्य चौड़ाई के लिए निम्न divसभी बनाने के लिए, और फिर a:hover + div सिर्फ सही एक की चौड़ाई का विस्तार कर सकते हैं। लेकिन यह काम नहीं करता है।

color: red टेक्स्ट-रंग परीक्षण के लिए जोड़ा गया है। क्योंकि कुछ परीक्षणों के बाद मुझे पता चला कि यह मुद्दा ~ चयनकर्ता और न ही सीएसएस-ऑर्डर है, बल्कि संक्रमण है। सभी संक्रमण रेखाओं को हटाकर और परिणाम देरी के बिना बिल्कुल अपेक्षित है।

• ऊपर गैर काम कर कोड के साथ Here is a fiddle, और
• संक्रमण कोड-लाइनों के साथ here is a fiddle हटा दिया है, जहां यह सब काम करता है (लेकिन देरी लापता): आप यहाँ परिणाम देख सकते हैं।

संक्रमण कोड-लाइनों के बिना सभी div लाल पाठ प्राप्त करें - नीचे तीन अतिरिक्त भी प्राप्त करें। लेकिन साथ संक्रमण कोड लाइनों, वे लाल नहीं रंग हैं - वास्तव में केवल hovered एक लाल coloered है, जिसका अर्थ है कि कोड लाइनों पूरी तरह से नजरअंदाज नहीं किया जाता है, लेकिन के रूप में एक ~ काम नहीं करता है अब चयनकर्ता।

निष्कर्ष यह है कि संक्रमण हस्तक्षेप करते हैं। मैं स्पष्ट रूप से एक चल रहे संक्रमण को रोक नहीं सकता और कोड के हस्तक्षेप खंड अप्रत्याशित रूप से व्यवहार कर रहा है और अनदेखा नहीं किया जा रहा है।

संक्रमण कोड लाइनों का वास्तव में व्यवहार क्या है जो इसका कारण बनता है?

---

उत्सुक मुझे लगता है कि परियोजना मैं मूल चौड़ाई पर काम कर रहा हूँ से पहले मंडराना है पर वास्तविकता में बता सकते हैं उन लोगों के लिए 0. इसलिए इस समाधान काम करेंगे:

a:hover ~ div { 
    display:none; 
} 

इसके बजाय रीसेट करने का प्रयास की

चौड़ाई, मैं चौड़ाई को हटा देता हूं और सब अच्छा है। मैं समझने के लिए ऊपर सवाल पूछ रहा हूं, मुद्दा क्या है।

Answer 1

आप लगभग वहाँ थे, बस अपने a:hover ~ div

https://jsfiddle.net/e3p97ewj/