為什麼我的 CSS3 轉換在使用 Display 屬性時不起作用？

CSS3 過渡不適用於 Display 屬性

概述

本文解決了使用 display 屬性時 CSS 過渡無法正常工作的問題。它提供了見解和替代解決方案以實現所需的效果。

問題陳述

目標是創建一種效果，隱藏的 div 在懸停在其父元素上時平滑淡入。然而，嘗試使用 CSS 過渡來實現這一點並不成功，導致隱藏的 div 只出現而沒有任何過渡。

根本原因

CSS 過渡無法應用於設定了 display 屬性的元素沒有人。這是因為 display: none 會從文件流中完全刪除該元素，使其無法產生任何效果。

替代解決方案

為了實現所需的淡入淡出效果，我們可以使用 opacity 屬性顯示的。透過操縱隱藏 div 的不透明度，我們可以在滑鼠懸停時逐漸顯示它。

這裡是更新的 CSS 程式碼：

#header #button:hover > .content {
    opacity: 1;
    height: 150px;
    padding: 8px;    
}

#header #button .content {
    opacity:0;
    height: 0;
    padding: 0 8px;
    overflow: hidden;

    -webkit-transition: all .3s ease .15s;
    -moz-transition: all .3s ease .15s;
    -o-transition: all .3s ease .15s;
    -ms-transition: all .3s ease .15s;
    transition: all .3s ease .15s;
}

在此程式碼中，隱藏 div 的不透明度最初設為 0，使其不可見。當滑鼠懸停在父按鈕上時，不透明度會逐漸過渡到 1，以平滑的淡入淡出效果顯示 div。

結論

透過了解 display 屬性的限制並實現替代解決方案使用不透明度，可以在懸停時實現隱藏元素所需的淡入過渡效果。

以上是為什麼我的 CSS3 轉換在使用 Display 屬性時不起作用？的詳細內容。更多資訊請關注PHP中文網其他相關文章！