平滑悬停过渡？

Question

我似乎遇到悬停描述的动画方面的问题。悬停本身工作得很好，看起来确切地放置在哪里;但是，在盘旋或远离元素时似乎没有褪色效果。相反，说明框显示在CSS中列出的0.5s内，并且以相同的方式消失。我期望创建一个平滑，过渡的效果，其中说明框淡入淡出。有人可以帮我调整吗？

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演示。

“不透明”是你需要指定的电平值CSS属性：http://www.w3schools.com/cssref/css3_pr_opacity.asp