在工作中為了讓頁面有動感，前端開發人員經常會在頁面中加上滑鼠經過和滑鼠移出的效果，使頁面更具吸引力。這篇文章就跟大家講講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中文網其他相關文章！
