CSS 不透明度不过渡

Question

我使用带有 input 和 p 的 div 创建了一个小工具提示测试。但是，当我尝试增加不透明度以使工具提示有效地淡入和淡出时，似乎出了点问题。到目前为止，我已经在 Firefox 和 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.

给出更好的位置

CSS 不透明度不过渡

CSS Opacity Not Transitioning

css

css-transitions