接下來我們來介紹「偽類選擇器（Pseudo-class Selector）」，也叫「虛擬類別選擇器」。這些選擇器的作用是針對元素在特定狀態下的樣式進行設定。雖然名字裡有「類」，但其實它們不是傳統意義上的類別，而是元素的一種特殊狀態，能夠讓你選擇那些在HTML中無法直接定位的狀態或特徵。

這些偽類通常用冒號 : 後接狀態名稱來表示。

:hover 是我們最常見的偽類選擇器，用於選擇鼠標懸停在元素上的狀態。

從下面的高鐵網站示意圖可以看見，如果將游標停在「早鳥」的按鈕上，早鳥的圖案和文字將會變成褐色

我們也可以在鍵盤按F12，開啟開發人員工具來看到這些偽類，可以看見有很多種不同的偽類，勾選中想預覽的偽類後，就可以看到相關樣式

接下來讓我們看看 :hover 要怎麼使用吧！

💠 `:hover` 基本用法

語法

1
2
3

選擇器:hover {
  屬性: 屬性值;
}

1	<a href="#">Lala Code</a>

a {
	color: gray;
}

a:hover {
	color: skyblue;
}

以上是一個簡單的連結變色效果，初始文字顏色為灰色，鼠標移上去後會呈現天藍色的文字。

預設文字顏色 gray

游標懸停文字顏色 skyblue

除了變換顏色外，我們常看見網站上的元素，我們還可以跟 transform 做搭配，在游標移動上去後，會做一些變形效果，讓網站更活潑

<div class="product-item">
  <img src="https://picsum.photos/260/280?random=1" />
  <h3>Strawberry juice</h3>
  <p>Sweet and Tangy Flavor</p>
</div>

.product-item {
  transition: transform 0.4s;
}

.product-item:hover {
  transform: scale(1.2);
}

See the Pen :hover by Lala (@bobee) on CodePen.

從上面的範例可以看見，游標移到卡片上時，卡片將會被放大，在實務的網站上時常可以看見這樣的效果。

:hover 用於選擇鼠標懸停在元素上的狀態，可以為網站增添生動活潑的效果

線上課程可以加速學習的時間，省去了不少看文件的時間XD，以下是我推薦的一些課程
想學習更多關於前後端的線上課程，可以參考看看。

Hahow 有各式各樣類型的課程，而且是無限次數觀看，對學生或上班族而言，不用擔心被時間綁住

如果你是初學者，非常推薦六角學院哦！
剛開始轉職也是上了六角的課，非常的淺顯易懂，最重要的是，隨時還有線上的助教幫你解決問題！

Udemy 裡的課程非常的多，品質普遍不錯，且價格都滿實惠的，CP值很高！
也是很多工程師推薦的線上課程網站。