CSS Opacity没有过渡

Question

我使用带有div和input的{​​{1}}创建了一个小工具提示测试。但是，当我尝试增加不透明度以使工具提示有效地淡入和淡出时，似乎出现了问题。我已经在Firefox＆amp; Chrome到目前为止还无法找出问题所在。

FIDDLE： 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提供更好的位置。