CSS geçiş kolaylığı aşımı

Question

Tamam çalışmıyor, bu yüzden bu dışarı kolaylaştırmak değil neden anlamıyorum: (hızlı görünüm için, sadece http://htmledit.squarefree.com yapıştırın, örneğin)

<style> 
#over { 
background: url(http://th01.deviantart.net/fs71/150/f/2013/005/0/6/dal_shabet__have__don_t_have_by_awesmatasticaly_cool-d5qkzu8.jpg); 
height:150px; 
width:150px; 
} 

#in { 
background: url(http://www.mygrafico.com/images/uploads/thumbs/thumb_revidevi_CoolMonsterTruck.jpg); 
height:150px; 
width:150px; 
} 

#in:hover { 
opacity: 0; 
transition: opacity .3s ease-in-out; 
} 

</style> 

<div id="over"> 
<div id="in"></div 
</div> 

Answer 1

Tam olarak ne sorduğundan emin değilim, ama sanırım ki geçişin sadece bir fare üzerinde gerçekleştiğini söylüyorsun, ve fareyi dışarıda bıraktığın zaman değil. geçiş yapan). Geçiş özelliğini #in:hover yerine #in'a eklemeniz gerekir. Geçiş, yalnızca #in öğenizin üzerinde gezindiğinde ortaya çıkar. #in altında geçiş için css taşıyın ve üzerinde fare ve fare dışarı çalışır. İstenen css'yi, #in:hover altında, bu durumda opaklık değişimi altında bırakmak istediğinizde, ancak gerçek geçiş css özelliği #in'un altına girecektir.

biraz daha net yapmak için:

#in { 
    background: url(http://www.mygrafico.com/images/uploads/thumbs/thumb_revidevi_CoolMonsterTruck.jpg); 
    height:150px; 
    width:150px; 
    transition: opacity .3s ease-in-out; /* add this here */ 
} 

#in:hover { 
    opacity:0; 
    /* and we've removed it from here */ 
} 

bilmek şey kolaylığı giriş çıkış o geçiş ne zaman ile ilgisi olmasıdır. Bu şekilde görünebilir, bu durumun üzerine gelmesi kolaylaşır ve rahatlama mouseout üzerindedir, fakat aslında, kolaylıkla içeri girme, kolaylık gibi bir şeyden ziyade, yavaş yavaş içeri ve dışarı rahatlayacağı anlamına gelir. yavaşça geçişe geçip sonuna doğru hızlanır. Bu, ne zaman gerçekleşeceğinden ziyade, geçişin tarzıyla ilgilidir.

Belki de bunu zaten anladınız, ancak sorunuza bağlı olarak orada kafanız karışmış gibi görünüyor.

Answer 2

@welbornio'nun yanıtı benim için çalıştı, ancak kolaylık ilk başta mükemmel çalışmadı. 'Img' ye uygulandığında, kolaylık etkisi sadece aralıklı olarak çalıştı. Etkinin her defasında çalışabilmesi için, 'img' ve 'vurgulu'ya' kolaylık sağlamak için kolaylık sağlamak zorunda kaldım. Bunun neden böyle olduğundan emin değilim ama aynı sorunla karşılaşan bir çözüm.