接下來我們來介紹「偽類選擇器(Pseudo-class Selector)」,也叫「虛擬類別選擇器」。這些選擇器的作用是針對元素在特定狀態下的樣式進行設定。雖然名字裡有「類」,但其實它們不是傳統意義上的類別,而是元素的一種特殊狀態,能夠讓你選擇那些在HTML中無法直接定位的狀態或特徵。
這些偽類通常用冒號 :
後接狀態名稱來表示。
:hover
是我們最常見的偽類選擇器,用於選擇鼠標懸停在元素上的狀態。
從下面的高鐵網站示意圖可以看見,如果將游標停在「早鳥」的按鈕上,早鳥的圖案和文字將會變成褐色
我們也可以在鍵盤按F12,開啟開發人員工具來看到這些偽類,可以看見有很多種不同的偽類,勾選中想預覽的偽類後,就可以看到相關樣式
接下來讓我們看看 :hover
要怎麼使用吧!
💠 :hover
基本用法
語法
1 | 選擇器:hover { |
範例
1 | <a href="#">Lala Code</a> |
1 | a { |
以上是一個簡單的連結變色效果,初始文字顏色為灰色,鼠標移上去後會呈現天藍色的文字。
預設文字顏色 gray
游標懸停文字顏色 skyblue
💠 實務應用:變形效果
除了變換顏色外,我們常看見網站上的元素,我們還可以跟 transform
做搭配,在游標移動上去後,會做一些變形效果,讓網站更活潑
1 | <div class="product-item"> |
1 | .product-item { |
See the Pen :hover by Lala (@bobee) on CodePen.
從上面的範例可以看見,游標移到卡片上時,卡片將會被放大,在實務的網站上時常可以看見這樣的效果。
💠 總結
:hover
用於選擇鼠標懸停在元素上的狀態,可以為網站增添生動活潑的效果
🚀實體工作坊分享
玩轉 Web頁面的前端技術(HTML/CSS/JS) 一日體驗課
最近時賦學苑開了實體體驗課,即使你對程式碼沒有概念也能上手!Lala 會帶你一起做出一個個人品牌形象網站,帶你快速了解前端的開發流程,快跟我們一起玩轉 Web 吧!🚀線上課程分享
線上課程可以加速學習的時間,省去了不少看文件的時間XD,以下是我推薦的一些課程想學習更多關於前後端的線上課程,可以參考看看。
Hahow
Hahow 有各式各樣類型的課程,而且是無限次數觀看,對學生或上班族而言,不用擔心被時間綁住六角學院
如果你是初學者,非常推薦六角學院哦!剛開始轉職也是上了六角的課,非常的淺顯易懂,最重要的是,隨時還有線上的助教幫你解決問題!
Udemy
Udemy 裡的課程非常的多,品質普遍不錯,且價格都滿實惠的,CP值很高!也是很多工程師推薦的線上課程網站。