चौड़ाई संक्रमण - divs ओवरलैपिंग

मेरे पास एक कंटेनर के अंदर एक-दूसरे के आगे क्षैतिज रूप से स्थित 2 divs हैं। मैं चाहता हूं कि प्रत्येक div कंटेनर की पूरी चौड़ाई तक होवर पर चौड़ाई का विस्तार करे। समस्या यह है कि संक्रमण के बाद जब सूचक अब बाएं div (जो पहले एचटीएमएल प्रवाह में है) को घुमा रहा है, दाएं div के नीचे ओवरलैप किया गया है।चौड़ाई संक्रमण - divs ओवरलैपिंग

यहां एक उदाहरण है। संक्रमण को समाप्त होने तक बाएं div पर पॉइंटर को फिर से बनाने के लिए, फिर पॉइंटर को div से बाहर ले जाएं। वांछित प्रभाव यह है कि चौड़ाई धीरे-धीरे घट जाएगी (जैसे दाएं div की तरह)।

* { margin: 0; padding: 0; } 
 

 
#wrap { position: relative; width: 500px; margin: 0 auto; } 
 

 
#one, #two { height: 100px; position: absolute; transition: width 1s ease-out; } 
 

 
#one { width: 300px; background: #49d7b0; } 
 
#two { right: 0; width: 200px; background: #d8c800; } 
 

 
#one:hover, #two:hover { width: 500px; z-index: 1; }

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <title></title> 
 
\t <link rel="stylesheet" type="text/css" href="z-index.css"> 
 
</head> 
 
<body> 
 
\t <div id="wrap"> 
 
\t \t <div id="one"></div> 
 
\t \t <div id="two"></div> 
 
\t </div> 
 
</body> 
 
</html>

स्रोत

2016-03-01 user5842084

z- इंडेक्स समस्या है कि। माउस के आधार पर आपको ज़ेड-इंडेक्स को बढ़ाना होगा। मुझे लगता है कि पहली छाप में यह केवल सीएसएस –

के बीच अधिक अंतर के साथ z- सूचकांक सेट अन-hovered और आगे पीछे करता राज्य (उदाहरण के लिए, 1 से 10 के लिए जाना)।

जेड-इंडेक्स पर भी संक्रमण जोड़ें ... लेकिन केवल डिफ़ॉल्ट स्थिति पर वापस जाने पर ही।

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

डेमो: (पहली जगह में प्रमुख शैलियों के साथ)

#one:hover, 
 
#two:hover { 
 
    width: 500px; 
 
    z-index: 10; 
 
    transition: width 1s ease-out, z-index 0s linear; 
 
} 
 
#one, 
 
#two { 
 
    z-index: 1; 
 
    transition: width 1s ease-out, z-index 1s linear; 
 
} 
 

 
* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
#wrap { 
 
    position: relative; 
 
    width: 500px; 
 
    margin: 0 auto; 
 
} 
 
#one, 
 
#two { 
 
    height: 100px; 
 
    position: absolute; 
 
} 
 
#one { 
 
    width: 300px; 
 
    background: #49d7b0; 
 
} 
 
#two { 
 
    right: 0; 
 
    width: 200px; 
 
    background: #d8c800; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title></title> 
 
    <link rel="stylesheet" type="text/css" href="z-index.css"> 
 
</head> 
 

 
<body> 
 
    <div id="wrap"> 
 
    <div id="one"></div> 
 
    <div id="two"></div> 
 
    </div> 
 
</body> 
 

 
</html>

स्रोत

2016-03-01 18:07:38 vals

सही समाधान ट्रिगर किया गया है, यह निष्पादित करना बेहतर होगा, प्रवाह रहित ढंग से काम करता है! – user5842084

यह वास्तव में एक समस्या नहीं है, अभी जिस तरह अतिप्रवाह काम करना है। - इस तरह से, आप आगे पीछे करता div एक उच्च z- सूचकांक दे सकते हैं, और रिवर्स एनीमेशन है z- सूचकांक उच्च (रखने के एक कम सूचकांक करने के लिए इसे वापस छोड़ने

1) का प्रयोग करें सीएसएस-फ़्रेम एनिमेशन: आप 2 विकल्प हैं एनीमेशन के बहुत अंत में)।

2) का उपयोग जावास्क्रिप्ट/jQuery (अगर आप यह अच्छी तरह से सभी उपकरणों/ब्राउज़रों पर काम करना चाहता हूँ, मैं jQuery के वैसे भी जो IE8 तरह पुराने ब्राउज़र कि css3 का समर्थन नहीं करते)

स्रोत

2016-03-01 12:03:51

को समर्थन देता है की सिफारिश करेंगे, animation यहां चाल कर सकते हैं। दरअसल z-index यहां समस्या का कारण बनता है। आप निम्नलिखित तरीके से हल कर सकते हैं।

* { margin: 0; padding: 0; } 
 

 
#wrap { position: relative; width: 500px; margin: 0 auto; } 
 

 
#one, #two { height: 100px; position: absolute; transition: width 1s ease-out; } 
 

 
#one { width: 300px; background: #49d7b0; animation: movedec 1s; } 
 
#two { right: 0; width: 200px; background: #d8c800; } 
 

 
#one:hover { animation: moveinc 1s forwards; -webkit-animation: moveinc 1s forwards; } 
 
#two:hover { width: 500px; } 
 

 
@keyframes moveinc { 
 
    from {width: 300px; z-index: 1;} 
 
    to {width: 500px; z-index: 1;} 
 
} 
 

 
@keyframes movedec { 
 
    from {width: 500px; z-index: 1;} 
 
    to {width: 300px; z-index: 1;} 
 
} 
 

 
@-webkit-keyframes moveinc { 
 
    from {width: 300px; z-index: 1;} 
 
    to {width: 500px; z-index: 1;} 
 
} 
 

 
@-webkit-keyframes movedec { 
 
    from {width: 500px; z-index: 1;} 
 
    to {width: 300px; z-index: 1;} 
 
}

<div id="wrap"> 
 
\t \t <div id="one"></div> 
 
\t \t <div id="two"></div> 
 
\t </div>

स्रोत

2016-03-01 12:14:25 ketan

के साथ हासिल करना मुश्किल होगा, जबकि दूसरे संक्रमण को – Litestone

चौड़ाई संक्रमण - divs ओवरलैपिंग

उत्तर

संबंधित मुद्दे