站長(zhǎng)資訊網(wǎng)實(shí)現(xiàn)方法：1、使用“:hover”偽類選擇器，選擇鼠標(biāo)指針浮動(dòng)在其上的元素，并為其設(shè)置其樣式，語法“:hover{屬性名:屬性值}”；2、使用transtion屬性，語法“transtion:css屬性名稱 過度時(shí)間;”。
本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。
1、使用偽類實(shí)現(xiàn)樣式切換
偽類是CSS2.1時(shí)出現(xiàn)的新特性，讓許多原本需要JavaScript才能做出來的效果使用CSS就能實(shí)現(xiàn)。
比如實(shí)現(xiàn)下面的鼠標(biāo)懸停效果，只要為:hover偽類應(yīng)用一組新樣式即可。當(dāng)訪客鼠標(biāo)移動(dòng)到按鈕上面時(shí)，瀏覽器會(huì)自動(dòng)為按鈕應(yīng)用這新樣式。
<!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的過渡功能實(shí)現(xiàn)顏色過渡
直接使用偽類雖然實(shí)現(xiàn)了樣式的改變，但由于沒有過渡效果會(huì)顯得很生硬。以前如果要實(shí)現(xiàn)過渡，就需要借助第三方的js框架來實(shí)現(xiàn)?，F(xiàn)在只需要使用CSS3的過渡（transition）功能，就可以從一組樣式平滑的切換到另一組樣式。
下面鼠標(biāo)移入后，按鈕背景色會(huì)慢慢地變成黃色。鼠標(biāo)離開，過渡效果又會(huì)發(fā)生，顏色恢復(fù)到初始狀態(tài)。
<!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>
效果：
推薦學(xué)習(xí)：css視頻教程
