---
tags: 30 天軟體工程師體驗營｜2025
---
> 建議觀看的影音章節：
> - 擬態選擇器 :hover

# 🏅 切版任務 Day20 - hover, active 狀態練習

這一週會以設計稿的「部落格下面頁數切換」區塊來做範例練習

## :hover 效果是什麼？
:hover 是一種 CSS 偽類（pseudo-class），當使用者把滑鼠移到某個元素上方時，會觸發這個樣式效果。常見用法像是按鈕變色、顯示下拉選單等等。

## :active 是什麼？
CSS 的 :active 是一種 偽類（pseudo-class），表示元素在被點擊的那一瞬間的狀態。
當你「按下去（滑鼠點下還沒放開）」那一下，就會觸發 :active 狀態！

## 題目
複製此 [CodePen](https://codepen.io/yen-kg/pen/vEENNOd) 模板，並且完成以下條件：
1. 替 .page .arrow 觸碰時加上背景顏色、文字顏色、pointer 的小拇指。
2. 替 .page .arrow 按住不放時加上背景顏色、縮小 0.8 倍。

背景顏色色碼：#d6e6ff
文字顏色色碼：#1a5ddc

<!--
解答：
.pagination .page:hover,
.pagination .arrow:hover {
background-color: #d6e6ff;
color: #1a5ddc;
cursor: pointer;
}

.pagination .page:active,
.pagination .arrow:active {
background-color: #d6e6ff;
transform: scale(.8);
}

-->
## 回報流程

1. 將答案貼在 CodePen 並複製 CodePen 連結貼至「回報區」回報
（也可以將答案直接貼至「回報區」）


回報區
---

| 報數 | Discord 名字 | Codepen／其他回饋 |
|:----:|:-------------------:|:---------------------------------------------------------------------------------------------------------------------------------:|
| 1 | dean |[Codepen](https://codepen.io/ch933114/pen/ByNBjej?editors=1100)|
| 2 | Hank_0813 |[Codepen](https://codepen.io/hankyang1213/pen/wBawGGo)|
|3|Saika|[Codepen](https://codepen.io/saika4501/pen/XJbrdXB)|
| 4 | Owen He |[Codepen](https://codepen.io/owen1120/pen/azOoNpX)|
| 5 | 謝天 |[Codepen](https://codepen.io/crisxie/pen/QwbLNdq?editors=1100)|
| 6 | stone | [Codepen](https://codepen.io/bgrwlzoz-the-reactor/pen/zxGOqBm)|
| 7 | jingle0900 | [Codepen](https://codepen.io/EvaLi0472/pen/PwqYNep)|
| 8 | Min | [Codepen](https://codepen.io/cvqevoxk-the-decoder/pen/azOoNEx)|
| 9 | 阿龍 |[Codepen](https://codepen.io/Nemo-Lin/pen/yyNBOxx)|
| 10 | pastor |[Codepen](https://codepen.io/peter_hung/pen/wBawGjq)|
| 11 | Aoi |[Codepen](https://codepen.io/zching07/pen/qEdWZLE)|
| 12 | NAOJUN |[Codepen](https://codepen.io/NAOJUN/pen/ZYGzWmV)|
| 13 | akkk |[Codepen](https://codepen.io/ak-wu-the-decoder/pen/dPobXPp)|
| 14 | Archang |[Codepen](https://codepen.io/pxfnrvgk-the-styleful/pen/XJbrdOw)|
| 15 | nora_zizi |[Codepen](https://codepen.io/Nora-Ch/pen/RNPbRag)|
| 16 | Joseph_Kyuu |[Codepen](https://codepen.io/zrzfastd-the-reactor/pen/XJbrdLL)|
| 17 | 4chan |[Codepen](https://codepen.io/ijuolaqc-the-looper/pen/VYLZjKp)|
| 18 | Melanie |[Codepen](https://codepen.io/pnrcspte-the-animator/pen/JodPKRX?editors=1100)|
| 19 | 登登登 |[Codepen](https://codepen.io/Duncanin/pen/MYwgKQm)|
| 20 | ying |[Codepen](https://codepen.io/Lara-Lin/pen/bNdbedM)|
| 21 | andy |[Codepen](https://codepen.io/ewnblckz-the-styleful/pen/EajYyQK)|
| 22 | Klaus Chen |[Codepen](https://codepen.io/Klaus-Chen/pen/gbbVdpE)|
| 23 | Hugh |[Codepen](https://codepen.io/Hugh-Chen/pen/OPVLbLM)|
| 24 | DD |[Codepen](https://codepen.io/dorihung/pen/ogXvLEW)|
| 25 | B |[Codepen](https://codepen.io/Babel777/pen/WbveRvK)|
| 26 | RUDY |[Codepen](https://codepen.io/Rudy-crw/pen/pvJzReB?editors=1100)|
| 27 | 随縁 |[Codepen](https://codepen.io/anki0072011/pen/GgJKraX)|
| 28 | allen3290 |[Codepen](https://codepen.io/udadkudw-the-looper/pen/GgJKWVR)|
| 29 | 力文 |[Codepen](https://codepen.io/liwenchiou/pen/ogXvWPg)|
| 30 | JHT |[Codepen](https://codepen.io/juanht/pen/xbGKObG?editors=1101)|
| 31 | 7Lun |[Day20-Codepen](https://codepen.io/mfyvqhsn-the-bold/pen/JodPOYY)|
| 32 | oyll |[Codepen](https://codepen.io/dizzydog-rgb/pen/azOoYbo)|
| 33 | 0xmarduk |[Codepen](https://codepen.io/marduklien/pen/RNPbMaV)|
| 34 | HawkeyeLin |[Codepen](https://codepen.io/long-long/pen/gbpYeWo)|
| 35 | WEIWEI |[Codepen](https://codepen.io/weiwei93/pen/gbpYPdY)|
| 36 | ggininder |[Codepen](https://codepen.io/wei900221/pen/NPqKMpK)|
| 37 | cks40660 |[Codepen](https://codepen.io/CKS40660/pen/emNOMyY?editors=1100)|
|38|蛋殼|[Codepen](https://codepen.io/weybrian/pen/wBawXrJ)
| 39 | Cyan66 |[Codepen](https://codepen.io/Cyan66/pen/bNdbjEv)|
| 40 | WAWATA |[Codepen](https://codepen.io/wa-wa-GNOHC-WA-Wa/pen/OPVLwNz)|
| 41 | 柔術小子 |[Codepen](https://codepen.io/Li-Lee-Everything-is-PM/pen/raVBKWK?editors=1100)|
| 42 | Ariel |[Codepen](https://codepen.io/ariel0510/pen/zxGOJrN)|
| 43 | Leonard |[Codepen](https://codepen.io/hyyfjqra-the-sans/pen/raVBZBL?editors=0100)|
| 44 | Jane |[Codepen](https://codepen.io/jkmx/pen/VYLwppX)|
| 45 | haohaoliao |[Codepen](https://codepen.io/tqdtaouh-the-styleful/pen/xbGxrNE?editors=1100)|
| 46 | kelsonhouse |[Codepen](https://codepen.io/Kelson-House/pen/QwbWmOV?editors=1100)|
| 47 | Chuang |[Codepen](https://codepen.io/uidoytjq-the-solid/pen/JodjgbW)|
| 48 | An |[Codepen](https://codepen.io/bzrpsbjq-the-encoder/pen/MYwYagG?editors=1100)|
| 49 | Chia__ |[Codepen](https://codepen.io/Chia-the-encoder/pen/emNmvBN)|
| 50 | Aidd. |[Codepen](https://codepen.io/aiddchen/pen/ByNyWMe)|
|51|小趴|[Codepen](https://codepen.io/papa2415/pen/xbGbLPq)|
|52|tina01170 |[Codepen](https://codepen.io/tina-huang-the-bashful/pen/wBaBOqe)|
| 53 | wei_0982 |[Codepen](https://codepen.io/nico-lai/pen/JodjVLr)|
| 54 | Michelle |[Codepen](https://codepen.io/bastar_dize/pen/yyNNvEg?editors=1100)|
| 55 | Jessie_Yu | [Jessie_Yu 的 Codepen](https://codepen.io/bakyfkso-the-looper/pen/bNdEWwQ)|
| 56 | kent_31665 |[Codepen](https://codepen.io/kentlee406/pen/bNdExva)|
| 57 | mercury2508. |[Codepen](https://codepen.io/Mercury2508/pen/ByNLaNO)|
| 58 | Lynn |[Codepen](https://codepen.io/Yen-Ling-Peng/pen/OPVbyLz?editors=1100)|
| 59 | William Hsieh |[Codepen](https://codepen.io/lsaimqxa-the-vuer/pen/XJbpeKE?editors=1100)|
| 60 | 禹成林 |[Codepen](https://codepen.io/useirin/pen/MYwJMmZ)|
| 61 | Astrid |[6/6](https://codepen.io/astrid321654/pen/ZYGyyev?editors=1100)|
| 62 | ann.328 | [Codepen](https://codepen.io/yqmegupa-the-styleful/pen/NPqyWve) |
| 63 | JiaMori |[Codepen](https://codepen.io/jiamori/pen/wBaxZry)|
| 64 | Rogan |[Codepen](https://codepen.io/RoganHsu/pen/VYLGyop)|

<!--
| number | name |[Codepen]()|
-->