CSS3로 마우스 오버 페이드 사용

Question

내 요소가 왜 사라지지 않을지 알려주실 수 있습니까?

배경 이미지가 제대로 움직이지만, .home 클래스가 페이드 인하는 대신 표시됩니다.

감사합니다. 코드 스 니펫은 아래에 있습니다.

#home { 
           width:35px; 
           height:35px; 
           float:left; 
           margin:20px 20px 0 20px; 
           transition:background-position .2s ease; 
           -webkit-transition: background-position .2s ease; 
           -moz-transition: background-position .2s ease; 
           background-image:url('images/icons.png'); 
         } 
#home > .home { 
           position:absolute; 
           display:none; 
           margin-top:40px; 
           opacity:0; 
           transition:opacity 3s linear; 
         } 
         #home:hover > .home { 
           display:block; 
           opacity:1; 
         } 
         #home:hover { 
           background-position:0px 35px; 
         } 

<!-- END STYLE START HTML --> 
<div id="home"><div class="home">HOME</div></div> 

Answer 1

호버에서도 전환을 추가합니다. 크로스 브라우징 전환 추가에 대한

#home:hover > .home { 
    display:block; 
    opacity:1; 
    transition:opacity 3s linear; 
} 

:

-moz-transition ... 
-webkit-transition ... 
-o-transition ... 

-ms-는 지원되지 않습니다.

Answer 2

From W3Schools : "전환 속성은 모든 브라우저에서 지원되지 않습니다.". 대신 Firefox, Chrome, Safari 및 Opera의 특정 전환 속성을 사용하십시오. http://www.w3schools.com/cssref/css3_pr_transition.asp

IE는이 기능을 전혀 지원하지 않습니다.

실제 작업 전환을 원하면 JQuery와 같은 애니메이션을 지원하는 javascript 라이브러리 사용을 고려해야합니다.