css3顯示隱藏

CSS3 是目前​​最新的 CSS 規範，它的出現使得網頁設計效果更加豐富多彩。其中一個常用功能就是顯示隱藏。

CSS3 實作顯示隱藏的方式有多種，以下分別介紹。

一、使用display 屬性

display 屬性可以控制元素的顯示狀態，包括：

• none：將元素隱藏掉，同時不佔用頁面的空間。
• block：將元素顯示為區塊狀元素。
• inline：將元素顯示為行內元素。
• inline-block：將元素顯示為行內塊狀元素。

透過改變 display 屬性的值，可以實現元素的顯示與隱藏。例如，以下程式碼實現了當滑鼠懸停在元素上時，顯示圖片：

img {
  display: none;
}

div:hover img {
  display: block;
}

上面的程式碼中，將圖片的初始 display 屬性設為 none，即隱藏起來。然後透過 div:hover img，當滑鼠懸停在 div 元素上時，將圖片的 display 屬性設為 block，即顯示出來。

二、使用 visibility 屬性

visibility 屬性控制元素的可見性，與 display 屬性不同的是，設定 visibility 屬性為 hidden 還是會佔用頁面的空間。其取值包括：

• visible：元素可見。
• hidden：元素不可見，但仍佔用頁面空間。

以下程式碼實作了當滑鼠懸浮在元素上時，顯示文字內容：

div {
  visibility: hidden;
}

div:hover {
  visibility: visible;
}

上面的程式碼中，將div 元素的初始visibility 屬性設為hidden，即隱藏起來。然後透過 div:hover，當滑鼠停留在 div 元素上時，將元素的 visibility 屬性設為 visible，即顯示出來。

三、使用 opacity 屬性

opacity 屬性控制元素的透明度，其取值範圍為 0 到 1，0 表示完全透明，1 表示完全不透明。透過改變元素的 opacity 屬性值，可以實現元素的顯示和隱藏。例如，以下程式碼實現了當滑鼠懸浮在元素上時，元素淡入淡出的效果：

div {
  opacity: 0;
  transition: opacity .5s ease-in-out;
}

div:hover {
  opacity: 1;
}

上面的程式碼中，將 div 元素的初始 opacity 屬性設為 0，即完全透明。然後透過 div:hover，當滑鼠懸停在 div 元素上時，將元素的 opacity 屬性設為 1，即完全不透明。同時加入了 transition 屬性，實現了淡入淡出的效果。

以上就是幾種使用 CSS3 實作顯示隱藏的方式，可以依需求選擇。值得注意的是，CSS3 對一些舊版本的瀏覽器不相容，因此在編寫程式碼時要考慮到相容性問題。

以上是css3顯示隱藏的詳細內容。更多資訊請關注PHP中文網其他相關文章！