網頁設計CSS hover，網站互動變得更美麗

Hover效果是什麼，就是滑鼠移動過去，可以看到動態的效果，比如說圖片變大、按鈕變色，文字變色等等，這些都是Hover效果呈現的，增加網站互動效果，讓網站設計不死板，Hover效果有很多方式可以呈現，這裡有基本的Hover教學，學會了就可以延伸運應囉！

文字底線: 利用偽元素

See the Pen

articles_css_hover 01

by wenetCodePen ( @wenetcodepen) on CodePen.

文字底線: 利用偽元素範例 -codepen

文字底線: 利用另一個DIV當作底線

See the Pen

articles_css_hover02

by wenetCodePen ( @wenetcodepen) on CodePen.

文字底線: 利用另一個DIV當作底線範例 -codepen

文字顏色: 更改文字顏色

See the Pen

articles_css_hover03

by wenetCodePen ( @wenetcodepen) on CodePen.

文字顏色: 更改文字顏色範例 -codepen

文字顏色: 利用背景顏色配合文字顏色來凸顯

See the Pen

articles_css_hover04

by wenetCodePen ( @wenetcodepen) on CodePen.

文字顏色: 利用背景顏色配合文字顏色來凸顯範例 -codepen