CSS:hover偽類選擇器怎么用

小編給大家分享一下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偽類選擇器怎么用有了一定的了解，想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！