# CSS 8. Pseudo Classes / 偽元素，改變樣式 :hover

- 補充: 此名詞唸作 **seudo Classes**，請略過P :)

### 執行一個動作，進而改變元素

### :hover

- 當滑鼠游標移動到該區域時，改變 CSS

例如下面：意思是，當我游標移動到 **textarea** 背景顏色會產生改變。

textarea:hover {
  background-color: aqua;
}

- 可參考 [MDN 文件](https://developer.mozilla.org/zh-TW/docs/Web/CSS/Pseudo-classes)，內有更多的 Pseudo Classes

### 常用的 Pseudo Classes：

1. hover - 範例：

input[type="text"]:hover {
  color: brown;
}

- 原本輸入時，是綠色的。


- 當游標移動過去後，變成紅色。


---

2. :active - 範例：

- 這邊無法截圖，故使用文字敘述，意思是: 原本輸入匡是綠色文字，但只要滑鼠按著不放，文字就會變換成紅色，直到放開為止。

---

3. :focus - 範例:

- focus，當游標點擊到當下的物件時，會形成一個聚焦。
欄位自動套上 css，直到使用者將游標移動到下一個目標之前。

input[type="text"]:focus {
  color: goldenrod;
}

###### tags: `2022 網頁開發全攻略教程 / CSS篇章`