站長資訊網實現方法：1、使用“:hover”偽類選擇器，選擇鼠標指針浮動在其上的元素，并為其設置其樣式，語法“:hover{屬性名:屬性值}”；2、使用transtion屬性，語法“transtion:css屬性名稱 過度時間;”。
本教程操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。
1、使用偽類實現樣式切換
偽類是CSS2.1時出現的新特性，讓許多原本需要JavaScript才能做出來的效果使用CSS就能實現。
比如實現下面的鼠標懸停效果，只要為:hover偽類應用一組新樣式即可。當訪客鼠標移動到按鈕上面時，瀏覽器會自動為按鈕應用這新樣式。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> .slickButton { color: white; font-weight: bold; padding: 10px; border: solid 1px black; background: lightgreen; cursor: pointer; } .slickButton:hover { color: black; background: yellow; } </style> </head> <body> <button class="slickButton">盼望著，盼望著</button> </body> </html>
效果：
2、使用CSS3的過渡功能實現顏色過渡
直接使用偽類雖然實現了樣式的改變，但由于沒有過渡效果會顯得很生硬。以前如果要實現過渡，就需要借助第三方的js框架來實現。現在只需要使用CSS3的過渡（transition）功能，就可以從一組樣式平滑的切換到另一組樣式。
下面鼠標移入后，按鈕背景色會慢慢地變成黃色。鼠標離開，過渡效果又會發生，顏色恢復到初始狀態。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> .slickButton { color: white; font-weight: bold; padding: 10px; border: solid 1px black; background: lightgreen; cursor: pointer; transition: background 0.5s, color 0.5s; -webkit-transition: background 0.5s, color 0.5s; } .slickButton:hover { color: black; background: yellow; } </style> </head> <body> <button class="slickButton">盼望著，盼望著</button> </body> </html>
效果：
推薦學習：css視頻教程
