CSS不透明度不过渡

Question

我创建了一个小的工具提示测试，使用div与input和p。然而，当我尝试增加不透明度以使工具提示有效地淡入和淡出时，似乎出现了一些问题。我在火狐浏览器上试过。Chrome到目前为止，无法找出问题所在。

小提琴:http://jsfiddle.net/2vsts8fv/

Answer 1

这是因为display: none属性，它立即适用。

作为一种选择，您可以使用visibility来隐藏您的项目，这也可以很好地配合过渡:

p.tip {
    display: inline;
    visibility: hidden;
    transition: opacity 1s, visibility 1s;
}
div.tooltip:hover > p.tip {
    visibility: visible;
    opacity: 1;
}

JSFiddle

Answer 2

那是因为您使用的是display: none。试试visibility: hidden，通过CSS给出更好的位置。