前言

今天來講 hover 當我們觸碰到某個元素時，會產生不同的效果

hover基本語法

要使hover有作用必須在hover前面加上 ':' --> :hover
除了原先設定寫好的CSS之外，
再寫另一個CSS，並將:hover寫在名稱後面 --> .aaa:hover{}
假設今天當我們將滑鼠游標碰到名為 aaa的class 的 超連結 時，
要變換他的背景顏色，如下
原先的背景色

.aaa{
    background: #aaa;
}

透過hover後要變更的背景色

.aaa:hover{
    background: #000;
}

當然不只是顏色可以改變，其他像是字體、邊框、長寬等等都可以透過hover滑到時改變

transition

那當我們碰到時，他直接改變顏色或是大小是不是有點奇怪?
這時候就可以使用我們的transition來讓我們的動畫更生動

transistion : 屬性 轉換時間 延遲執行時間 速度 ;

改變前

.aaa{
    background: #aaa;
    transition: all 1s 0s ;
}

改變後

.aaa:hover{
    background: #000;
}

這樣我們的動畫就會不死板並且更有延續感啦

那最後要再加點東西讓我們的程式碼可以看起來較完整一點

CSS:

改變前

.aaa{
    background: #aaa;
    color: #fff;
    font-size: 30px;
    text-decoration: none;
    transition: all 1s 0s ;
}

改變後

.aaa:hover{
    background: #000;
}

HTML:

直接寫一個超連結來測試我們的hover效果就好

<a href="#" class="bts">OMG</a>

今天先這樣，那我們鐵人賽Day15見囉!!