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