CSS przejście łatwość-out nie działa

Question

Ok, więc nie rozumiem, dlaczego nie ułatwić zewnątrz, tylko w: (do szybkiego podglądu, wystarczy wkleić go w http://htmledit.squarefree.com, na przykład)

<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

Nie jestem do końca pewien, o co pytasz, ale myślę, że mówisz, że przejście następuje tylko po kliknięciu myszą, a nie po wyjściu myszy (po prostu cofa się tak, jak było wcześniej, zamiast przejście). Musisz dodać właściwość przejścia do #in, a nie #in:hover. Przejście ma miejsce tylko wtedy, gdy zostanie przeniesiony element #in. Przenieś css dla przejścia pod #in i będzie działać na myszy nad myszką i na zewnątrz. Chcesz zostawić wybrane css dla stanu aktywowania pod pozycją #in:hover, w tym przypadku zmiana nieprzezroczystości, ale właściwa właściwość przejścia do css zostanie podana pod #in.

Aby uczynić go trochę bardziej jasne:

#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 */ 
} 

Rzecz jest wiedzieć, że łatwość-in-out nie ma nic wspólnego ze kiedy będzie przechodzić. Może się to wydawać w ten sposób, że łatwość jest w zawieszeniu, a wyciszanie odbywa się na zasadzie "mouseout", ale w rzeczywistości, łatwość wchodzenia na zewnątrz oznacza, że ​​będzie ona powoli wchodzić i wychodzić, a nie jak ułatwienie, które ułatwia do przejścia powoli, a następnie przyspiesza do końca. Odnosi się do stylu samej transformacji, a nie kiedy nastąpi.

Może już to zrozumiałeś, ale na podstawie twojego pytania wygląda na to, że byłeś zdezorientowany.

Answer 2

Znalazłem odpowiedź @welbornio dla mnie, jednak łatwość w wejściu na początku nie działała idealnie. Po zastosowaniu do "img" efekt "ease" działał tylko sporadycznie. Zauważyłem, że aby efekt działał za każdym razem, musiałem zastosować ułatwiony dostęp do "img" i odejść do "zawisu". Nie jestem pewien, dlaczego tak się dzieje, ale to rozwiązanie, jeśli ktoś wpadnie na ten sam problem.