使用 CSS 完成悬停后如何淡出

Question

所以悬停时会显示我的 tumblr 主题中的主题标签。
主题标签在悬停时淡入并显示，但一旦跑者移出该区域，它就会变回而没有任何效果。 我怎样才能使主题标签淡出？

 .posts:hover .tags {
opacity:1;
-moz-transition-duration:1s;
-webkit-transition-duration:1s;
-o-transition-duration:1s;
} 

Answer 1

问题是在应用 :hover 时将 transition-duration 应用到元素，这使得淡出不起作用。所以将 transition-duration 移动到 .tags 如下所示

/* default CSS; when :hover is not triggered */
.posts .tags {
    opacity:0;
    -webkit-transition-duration: 1s;
       -moz-transition-duration: 1s;
         -o-transition-duration: 1s;
            transition-duration: 1s;
}
/* When :hover is triggered */
.posts:hover .tags {
    opacity:1;
}