細心的小伙伴會發現，幾乎每個網站都會用到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中文網其它相關文章！