詳解CSS:hover偽類選擇器的使用方法（附程式碼）

在工作中為了讓頁面有動感，前端開發人員經常會在頁面中加上滑鼠經過和滑鼠移出的效果，使頁面更具吸引力。這篇文章就跟大家講講CSS中的hover事件，CSS:hover怎麼使用，以及用程式碼說明怎麼用CSS:hover變色。需要的小夥伴，繼續往下看吧。

細心的小夥伴會發現，幾乎每個網站都會用到hover，hover一般被應用在按鈕、logo以及圖片等元素上面,但有些時候也會用到mouseover和mouseout這兩個滑鼠事件，但是JavaScript比較麻煩，建議能用CSS解決的盡量用CSS吧，這樣可以提高效能。接下來就詳細講講hover的使用方法。

一、定義與用法

定義：hover在滑鼠移到連結上時可以新增特殊樣式。

用法：選擇器：hover{屬性：屬性值} 
例如：
 a:hover{background-color:yellow;}
 .aa:hover{color:#FFF; background:#0C0;}

與hover相關的偽類別:

 :hover 選擇器可用於所有元素，不僅是連結。
 :link 選擇器設定了未造訪過的頁面連結樣式,
 :visited 選擇器設定造訪過的頁面連結的樣式
 :active選擇器設定當你點選連結時的樣式

注意：為了產生預期的效果，:hover 必須位於:link 和:visited 之後。

二、CSS:hover方法實例

實例描述：當滑鼠進過div時，這個div逐漸變大，當滑鼠移出時，div又逐漸變小，回到最初的樣式。這個就是使用的CSS hover事件實現的。

HTML部分：

<div class="aa"></div>

CSS部分：

.aa{
            width: 100px;
            height: 100px;
            background-color: blue;
            -webkit-transition: transform 2s linear;
            -moz-transition: transform 2s linear;
            -ms-transition: transform 2s linear;
            -o-transition: transform 2s linear;
            transition: transform 2s linear;
        }
        .aa:hover{
            -webkit-transform: scale(2);
            -moz-transform: scale(2);
            -ms-transform: scale(2);
            -o-transform: scale(2);
            transform: scale(2);
        }

效果圖：

左圖是滑鼠未移入的樣式，右圖是滑鼠移入後的樣式。

注意：以上介紹了CSS:hover的使用方法，比較簡單。要注意的是，hover對同等級的元素改變樣式，改變的是相鄰兄弟元素的樣式，也就是一個元素的樣式；對元素的子元素套用hover改變樣式，可以同時運作。利用偽類改變其他元素的樣式，其他元素須是hover元素的子元素。這裡不做示範了，小夥伴可以自己試試看。

以上是詳解CSS:hover偽類選擇器的使用方法（附程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！