부드러운 호버 전환?

Question

호버 (hover) 설명의 애니메이션 측면에 문제가있는 것처럼 보입니다. 호버 자체는 잘 작동하고 정확하게 놓인 위치에 나타납니다. 그러나 엘리먼트 위로 오거 나 멀리 떨어질 때 페이드 효과가없는 것처럼 보입니다. 대신 설명 상자는 CSS에 나열된 0.5 초 내에 급격하게 나타나며 같은 방식으로 사라집니다. 설명 상자가 페이드 인 및 페이드 아웃되는 부드럽고 전환 효과를 만들려고합니다. 누군가 나를 조정하도록 도와 줄 수 있습니까?

CODE :

#description { 
    opacity:0; 
    background:#fff; 
    z-index:30; 
    position:fixed; 
    margin-left:249px; 
    margin-top:-5px; 
    border:1px solid #000; 
    width:230px; 
    height:299px; 
    color:{color:text}; 
    -webkit-transition: opacity 0.5s ease-in-out; 
    -moz-transition: opacity 0.5s ease-in-out; 
    -ms-transition: opacity 0.5s ease-in-out; 
    -o-transition: opacity 0.5s ease-in-out; 
    transition: opacity 0.5s ease-in-out; } 

#description a { 
    color:{color:text}; 
    -webkit-transition: opacity 0.5s ease-in-out; 
    -moz-transition: opacity 0.5s ease-in-out; 
    -ms-transition: opacity 0.5s ease-in-out; 
    -o-transition: opacity 0.5s ease-in-out; 
    transition: opacity 0.5s ease-in-out; } 

#sidebar:hover #description { 
    opacity:0.6; 
    -webkit-transition: opacity 0.5s ease-in-out; 
    -moz-transition: opacity 0.5s ease-in-out; 
    -ms-transition: opacity 0.5s ease-in-out; 
    -o-transition: opacity 0.5s ease-in-out; 
    transition: opacity 0.5s ease-in-out; } 

Answer 1

이

#description { 
    opacity:0; 
    background:#fff; 
    z-index:30; 
    position:fixed; 
    margin-left:249px; 
    margin-top:-5px; 
    border:1px solid #000; 
    width:230px; 
    height:299px; 
    color:{color:text}; 
    -webkit-transition: opacity 0.5s ease-in-out; 
    -moz-transition: opacity 0.5s ease-in-out; 
    -ms-transition: opacity 0.5s ease-in-out; 
    -o-transition: opacity 0.5s ease-in-out; 
    transition: opacity 0.5s ease-in-out; 
} 

#description a { color:{color:text}; } 
#description:hover { opacity:0.6; } 

Answer 2

내 코드에서 자신을 시도 ...이보십시오. 불투명도를 없애면 효과가 있습니다. 데모를 보려면 youtiming dot com을 참조하십시오. http://www.w3schools.com/cssref/css3_pr_opacity.asp