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

Question

所以我的tumblr主题中的主题标签显示何时悬停 当悬停时，主题标签会淡入并显示，但是一旦courser移出该区域，它就会变回而没有任何影响。 如何淡出主题标签有效？

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

Answer 1

问题是transition-duration在应用:hover时应用于元素，这使得淡出不起作用。所以将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;
}