CSS3 過渡不適用於Display 屬性
在CSS 中,display 屬性在定義元素是否可見或隱藏方面起著至關重要的作用。另一方面,過渡可以隨著時間的推移而實現平滑的視覺變化。但是,嘗試將過渡應用於顯示設為無的元素可能會導致意外行為。
解決問題
問題源自於顯示的性質財產。當元素的顯示設為無時,它將從頁面中刪除,就好像它從未存在過一樣。因此,它無法部分顯示或進行過渡。
替代解決方案:使用不透明度
要在懸停時實現所需的淡入淡出效果,請考慮使用不透明度屬性。 Opacity 控制元素的透明度,使其逐漸出現或消失。
CSS 解決方案
實現以下CSS 調整以啟用淡入淡出效果:
#header #button:hover > .content { opacity: 1; height: 150px; padding: 8px; } #header #button .content { opacity: 0; height: 0; padding: 0 8px; overflow: hidden; transition: all .3s ease .15s; }
透過結合不透明度和過渡,當滑鼠懸空停在按鈕上時,隱藏的內容會淡入視圖。為了簡潔起見,省略了跨瀏覽器相容性的供應商前綴。
其他注意事項
除了不透明度之外,還可以探索調整高度和填充屬性以實現類似的效果效果。
附加資源
以上是為什麼當顯示設定為「無」時 CSS3 過渡不起作用?的詳細內容。更多資訊請關注PHP中文網其他相關文章!