定義和用法

:hover 偽類在鼠標(biāo)移到元素上時(shí)向此元素添加特殊的樣式。

說明

這個(gè)偽類應(yīng)用處于“懸停狀態(tài)”的元素。懸停定義為用戶指示了一個(gè)元素但沒有將其激活。對(duì)此最常見的例子是將鼠標(biāo)指針移到 HTML 文檔中一個(gè)超鏈接的邊界范圍內(nèi)。理論上，其他元素也可以處于懸停狀態(tài)，不過 CSS 沒有定義究竟是哪些元素。

激活的、已訪問的、未訪問的或者當(dāng)有鼠標(biāo)懸停在其上的鏈接，它們會(huì)在支持 CSS 的瀏覽器中以不同的方式顯示出來：

a:link {color: #FF0000}     /* 未訪問的鏈接 */
a:visited {color: #00FF00}  /* 已訪問的鏈接 */
a:hover {color: #FF00FF}    /* 當(dāng)有鼠標(biāo)懸停在鏈接上 */
a:active {color: #0000FF}   /* 被選擇的鏈接 */

注釋：為了產(chǎn)生預(yù)期的效果，在 CSS 定義中，a:hover 必須位于 a:link 和 a:visited 之后��！

注釋：為了產(chǎn)生預(yù)期的效果，在 CSS 定義中，a:active 必須位于 a:hover 之后��！

注釋：Pseudo-class（偽類）的名稱對(duì)大小寫不敏感。

注釋：偽類可與 CSS 類配合使用：

a.red:visited {color: #FF0000;}

<a class="red" href="css_syntax.asp">CSS Syntax</a>

如果上面這個(gè)例子中的鏈接已訪問過，那么它會(huì)顯示為紅色。

實(shí)例

規(guī)定鏈接的顏色：

a:link {color: #FF0000}     /* 未訪問的鏈接 */
a:visited {color: #00FF00}  /* 已訪問的鏈接 */
a:hover {color: #FF00FF}    /* 當(dāng)有鼠標(biāo)懸停在鏈接上 */
a:active {color: #0000FF}   /* 被選擇的鏈接 */

TIY （在頁面底部可以找到更多實(shí)例）

瀏覽器支持

所有主流瀏覽器都支持 :hover 偽類。

相關(guān)頁面

CSS 教程：CSS 偽類