CSS 動態偽類屬性探索：hover，active 和 focus

CSS 動態偽類別屬性探索：hover，active 和focus

簡介:
CSS 動態偽類別屬性是建構互動性與動態效果的重要工具。其中，hover、active 和 focus 是最常用的三個偽類屬性。本文將詳細介紹這三個偽類屬性的用法，並提供具體的程式碼範例。

1. hover 偽類別屬性:
   hover 偽類別屬性用於指定滑鼠懸停在元素上時的樣式。常見的應用程式包括改變連結的顏色、顯示隱藏內容等。

範例程式碼:

a:hover {
  color: red;
}

.div:hover {
  display: block;
}

上述範例中，滑鼠懸停在連結上時會將其顏色改為紅色；滑鼠懸停在.div 元素上時，會將其顯示出來（如果原本是隱藏狀態的）。

2. active 偽類別屬性:
   active 偽類別屬性用於指定滑鼠按下時的樣式。通常用於製作按鈕按下效果或連結點擊效果。

範例程式碼:

.button:active {
  background-color: yellow;
}

a:active {
  color: blue;
}

在上述範例中，當按鈕被按下時，其背景顏色會變成黃色；當連結被點擊時，連結文字顏色會變成藍色。

3. focus 偽類別屬性:
   focus 偽類別屬性用於指定目前焦點元素的樣式。主要應用於表單元素，用於標記使用者正在輸入的欄位。

範例程式碼:

input:focus {
  border: 2px solid green;
}

textarea:focus {
  box-shadow: 0 0 5px yellow;
}

上述範例中，當輸入框獲得焦點時，邊框會變成綠色；當文字域獲得焦點時，會顯示一個黃色的陰影效果。

總結:
CSS 動態偽類屬性是創建互動性和動態效果的重要工具，其中 hover、active 和 focus 是最常見的三個偽類屬性。透過合理的運用這些偽類屬性，可以輕鬆實現頁面元素在滑鼠互動及焦點狀態下的樣式變化。希望以上範例能幫助讀者更能理解和運用這些屬性，創造出更具互動性和動態的網頁效果。

以上是CSS 動態偽類屬性探索：hover，active 和 focus的詳細內容。更多資訊請關注PHP中文網其他相關文章！