CSS不透明度不转换

Question

我创建了一个小工具提示测试，使用div和input和p。但是，当我尝试并增加不透明度以使工具提示有效淡入淡出时，某些内容似乎出错了。到目前为止，我已经在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提供更好的位置。