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

CSS 動態偽類別屬性：hover，active 和focus，需要具體程式碼範例

在前端開發中，CSS 是一種非常重要的技術，可以實現頁面的樣式和版面。除了基本的樣式設定以外，CSS 還提供了一些動態偽類屬性，例如 hover，active 和 focus，可以在使用者與元素互動時改變元素的樣式。本文將詳細介紹這三個動態偽類屬性，並給出具體的程式碼範例。

一、hover 偽類別屬性

hover 是使用者將滑鼠停留在某個元素上時觸發的偽類別屬性。透過設定 hover 屬性，我們可以改變元素在滑鼠懸停時的樣式。以下是一個具體的範例：

HTML 程式碼如下：

<button class="button">悬停我</button>

CSS 程式碼如下：

.button {
  background-color: blue;
  color: white;
  padding: 10px;
  border: none;
}

.button:hover {
  background-color: red;
}

上面的範例中，我們建立了一個按鈕元素，初始狀態下按鈕的背景色為藍色，文字為白色。當滑鼠懸停在按鈕上時，按鈕的背景色會變成紅色。

二、active 偽類別屬性

active 是在使用者點擊元素時觸發的偽類別屬性。透過設定 active 屬性，我們可以改變元素在點擊時的樣式。以下是一個具體的範例：

HTML 程式碼如下：

<button class="button">点击我</button>

CSS 程式碼如下：

.button {
  background-color: blue;
  color: white;
  padding: 10px;
  border: none;
}

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

上面的範例中，我們建立了一個按鈕元素，初始狀態下按鈕的背景色為藍色，文字為白色。當使用者點擊按鈕時，按鈕的背景色會變成綠色。

三、focus 偽類別屬性

focus 是使用者將焦點放在某個元素上時觸發的偽類別屬性。通常用於表單元素，如輸入框。以下是一個具體的範例：

HTML 程式碼如下：

<input type="text" class="input">

CSS 程式碼如下：

.input {
  border: 1px solid gray;
  padding: 5px;
}

.input:focus {
  border-color: blue;
}

上面的範例中，我們建立了一個輸入框元素，初始狀態下方輸入框的邊框顏色為灰色。當使用者將焦點放在輸入框上時，輸入框的邊框顏色會變成藍色。

要注意的是，hover、active 和 focus 偽類別屬性只在使用者與元素互動時觸發，因此在設計頁面樣式時要考慮使用者的操作習慣。

總結：

CSS 的動態偽類別屬性可以透過改變元素的樣式，提升使用者體驗。在本文中，我們學習了 hover、active 和 focus 這三個常用的動態偽類屬性，並給出了具體的程式碼範例。希望這篇文章對你的前端開發有幫助。

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