css - 平滑的悬停过渡？

Question

我似乎在处理悬停描述的动画方面遇到了麻烦。悬停本身工作正常并且准确地出现在它放置的位置；但是，将鼠标悬停在元素上或远离元素时似乎没有淡入淡出效果。相反，描述框在 CSS 中列出的 0.5 秒内突然出现，并以同样的方式消失。我希望创建一种平滑的过渡效果，其中描述框会淡入和淡出。有人可以帮我调整一下吗？

代码:

#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; }