सीएसएस: संक्रमण

Question

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

मैं कुछ इस तरह किया:

box:hover { 
    z-index: 50; 
} 

लेकिन वहाँ एक समस्या है, जब हम माउस को दूसरी बाहरी सफेद जगह पर ले जाते हैं, तो z-index मूल्य पर वापस, दूसरों के समान ही। तो यह दिखाई देता है कि पिछला तत्व अगले स्तर की तुलना में कम परत में है।

संक्रमण के अंत तक, संपत्ति को लागू करने के लिए कैसे रोकें?

यहां मेरा jsFiddle है। एक तत्व पर होवर करने की कोशिश करें, अपने माउस को तत्व से बाहर ले जाएं और अन्य तत्वों की पृष्ठभूमि-छवि संक्रमण समाप्त होने से पहले हमारे आच्छादित तत्व के सामने होगी।

अद्यतन: यह समस्या का स्क्रीन शॉट है। यह तब होता है जब हम तत्व पर असहज करते हैं। background-image अन्य तत्वों के हमारे आच्छादित तत्व के सामने आते हैं।

Answer 1

z-index के लिए भी एक संक्रमण जोड़े, लेकिन एक देरी डालने केवल जब .box सामान्य स्थिति में है।

तो z-index हॉवर पर istantly बदल जाएगा, जबकि विपरीत कार्रवाई पर ("unhover") z-index अपनी प्रारंभिक मूल्य ले जाएगा लेकिन 0.5 के बाद ही सेकंड कर

(अपने विस्तार के प्रभाव की अवधि 0.4 सेकंड है)

.box { 
    ... 
    z-index: 1; 
    -webkit-transition: z-index 0s .5s; 
     -moz-transition: z-index 0s .5s; 
      transition: z-index 0s .5s; 
} 

.box:hover { 
    -webkit-transition: z-index 0s 0s; 
     -moz-transition: z-index 0s 0s; 
      transition: z-index 0s 0s; 
    z-index: 50; 
} 

उदाहरण: http://jsfiddle.net/yjg2oach/

Answer 2

अपने .box समूह के लिए एक संक्रमण विशेषता जोड़ें।

.box { 
    float: left; 
    position: relative; 
    width: 100px; 
    height: 100px; 
    margin: 10px; 
    margin-bottom: 35px; 
     transition: .4s; 
} 

फिक्स्ड fiddle