CSS:hover偽類選擇器怎么用

小編給大家分享一下CSS:hover偽類選擇器怎么用，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

一、定義和用法

定義：hover在鼠標(biāo)移到鏈接上時(shí)可以添加特殊樣式。

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

與hover相關(guān)的偽類:

:hover 選擇器可用于所有元素，不僅是鏈接。
:link 選擇器設(shè)置了未訪問過的頁面鏈接樣式,
:visited 選擇器設(shè)置訪問過的頁面鏈接的樣式
:active選擇器設(shè)置當(dāng)你點(diǎn)擊鏈接時(shí)的樣式

注意：為了產(chǎn)生預(yù)期的效果，:hover 必須位于 :link 和 :visited 之后。

二、CSS:hover方法實(shí)例

實(shí)例描述：當(dāng)鼠標(biāo)進(jìn)過div時(shí)，這個(gè)div逐漸變大，當(dāng)鼠標(biāo)移出時(shí)，div又逐漸變小，回到最初的樣式。這個(gè)就是使用的CSS hover事件實(shí)現(xiàn)的。

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);
        }

效果圖：

左圖是鼠標(biāo)未移入的樣式，右圖是鼠標(biāo)移入后的樣式。

看完了這篇文章，相信你對(duì)CSS:hover偽類選擇器怎么用有了一定的了解，想了解更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！