[CSS] visible v.s. display

遇到的問題：
製作 animation 時，希望hover 主項目後，子項目動畫淡出；
但子項目在未出現前，不希望被滑鼠偵測到，也就是希望子項目元素 hover 不存在

下列為使用 visibility 達成以上需求的範例

visibility :

隱藏元素但保持元素的浮動位置

被設置為 hidden 的時候，元素雖然被隱藏了，但它仍然佔據它原來所在的位置，
會影響後續元素的版面配置

display :

移除元素

被設置 none，這時元素實際上就從頁面中移除，它下面所在的元素就會被自動補齊，
後續元素不會受其影響


Reference
實例分析CSS屬性Display與Visibility不同
Animation CSS3: display + opacity