這篇文章主要介紹了css實現(xiàn)鼠標經(jīng)過樣式改變的方法，具有一定借鑒價值，需要的朋友可以參考下。下面就和我一起來看看吧。

成都創(chuàng)新互聯(lián)公司是專業(yè)的彭山網(wǎng)站建設公司，彭山接單;提供網(wǎng)站制作、成都網(wǎng)站制作,網(wǎng)頁設計,網(wǎng)站設計,建網(wǎng)站,PHP網(wǎng)站建設等專業(yè)做網(wǎng)站服務;采用PHP框架,可快速的進行彭山網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團隊,希望更多企業(yè)前來合作!

什么是css

css是一種用來表現(xiàn)HTML或XML等文件樣式的計算機語言，主要是用來設計網(wǎng)頁的樣式，使網(wǎng)頁更加美化。它也是一種定義樣式結(jié)構(gòu)如字體、顏色、位置等的語言，并且css樣式可以直接存儲于HTML網(wǎng)頁或者單獨的樣式單文件中，而樣式規(guī)則的優(yōu)先級由css根據(jù)這個層次結(jié)構(gòu)決定，從而實現(xiàn)級聯(lián)效果，發(fā)展至今，css不僅能裝飾網(wǎng)頁，也可以配合各種腳本對于網(wǎng)頁進行格式化。

css實現(xiàn)鼠標經(jīng)過樣式改變的方法總結(jié)：1、使用“:hover”偽類選擇器，選擇鼠標指針浮動在其上的元素，并為其設置其樣式，語法“:hover{屬性名:屬性值}”；2、使用transtion屬性，語法“transtion:css屬性名稱 過度時間;”。

1、使用偽類實現(xiàn)樣式切換
偽類是CSS2.1時出現(xiàn)的新特性，讓許多原本需要JavaScript才能做出來的效果使用CSS就能實現(xiàn)。
比如實現(xiàn)下面的鼠標懸停效果，只要為:hover偽類應用一組新樣式即可。當訪客鼠標移動到按鈕上面時，瀏覽器會自動為按鈕應用這新樣式。

    
        
        
    

    
        盼望著，盼望著
    

效果：

2、使用CSS3的過渡功能實現(xiàn)顏色過渡
直接使用偽類雖然實現(xiàn)了樣式的改變，但由于沒有過渡效果會顯得很生硬。以前如果要實現(xiàn)過渡，就需要借助第三方的js框架來實現(xiàn)?，F(xiàn)在只需要使用CSS3的過渡（transition）功能，就可以從一組樣式平滑的切換到另一組樣式。
下面鼠標移入后，按鈕背景色會慢慢地變成黃色。鼠標離開，過渡效果又會發(fā)生，顏色恢復到初始狀態(tài)。

    
        
        
    

    
        盼望著，盼望著
    

效果：

以上就是css實現(xiàn)鼠標經(jīng)過樣式改變的方法的詳細內(nèi)容了，看完之后是否有所收獲呢？如果想了解更多相關內(nèi)容，歡迎來創(chuàng)新互聯(lián)行業(yè)資訊！