Lala Code

Lala 的前端大補帖,歡迎一起鑽研前端技術😊

0%

Day13-:hover 游標懸停狀態,讓網頁更動態活潑

hover

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

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

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



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

:hover



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

:hover

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



💠 :hover 基本用法

語法

1
2
3
選擇器:hover {
屬性: 屬性值;
}

範例

1
<a href="#">Lala Code</a>
1
2
3
4
5
6
7
a {
color: gray;
}

a:hover {
color: skyblue;
}

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

預設文字顏色 gray
:hover

游標懸停文字顏色 skyblue
:hover



💠 實務應用:變形效果

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

1
2
3
4
5
<div class="product-item">
<img src="https://picsum.photos/260/280?random=1" />
<h3>Strawberry juice</h3>
<p>Sweet and Tangy Flavor</p>
</div>
1
2
3
4
5
6
7
.product-item {
transition: transform 0.4s;
}

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

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

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


💠 總結

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



🚀實體工作坊分享

玩轉 Web頁面的前端技術(HTML/CSS/JS) 一日體驗課

最近時賦學苑開了實體體驗課,即使你對程式碼沒有概念也能上手!Lala 會帶你一起做出一個個人品牌形象網站,帶你快速了解前端的開發流程,快跟我們一起玩轉 Web 吧!



🚀線上課程分享

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

Hahow

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



六角學院

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


Udemy

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