卡卡網(wǎng)

hover在css里比較常見(jiàn)，多用于菜單或一些按鈕上的鼠標(biāo)事件，用法也比較簡(jiǎn)單，不難掌握。

不過(guò)在瀏覽器兼容性測(cè)試中，發(fā)現(xiàn)ie瀏覽器對(duì)hover還是很挑剔的，html寫(xiě)法會(huì)影響hover是否有效。

我們先比較看看下面兩組html代碼的寫(xiě)法：

代碼一：

<ul>
       <li><a href="http://www.howtostagehomes.com/ping.aspx" class="ping-menu">ping<span/></a></li>
       <li><a href="http://www.howtostagehomes.com/tracert.aspx" class="tracert-menu">tracert<span/></a></li>
       <li><a href="http://www.howtostagehomes.com/dns/" class="dns-menu">dns<span/></a></li>
       <li><a href="http://www.howtostagehomes.com/webspeed/" class="webspeed-menu">webspeed<span/></a></li>
</ul>

代碼二：

<ul>
       <li><a href="http://www.howtostagehomes.com/ping.aspx" class="ping-menu">ping<span></span></a></li>
       <li><a href="http://www.howtostagehomes.com/tracert.aspx" class="tracert-menu">tracert<span></span></a></li>
       <li><a href="http://www.howtostagehomes.com/dns/" class="dns-menu">dns<span></span></a></li>
       <li><a href="http://www.howtostagehomes.com/webspeed/" class="webspeed-menu">webspeed<span></span></a></li>
</ul>

細(xì)心些你會(huì)發(fā)現(xiàn)，<span>標(biāo)簽的差異，但是在這次瀏覽器兼容性測(cè)試中發(fā)現(xiàn)，第一種代碼的寫(xiě)法，即<span/>，在IE8里不能正確執(zhí)行hover鼠標(biāo)事件，而第二種代碼的寫(xiě)法，<span></span>在IE8里能正確執(zhí)行hover鼠標(biāo)事件。不過(guò)，其他瀏覽器兩種寫(xiě)法均可。

這次勘查用了很多時(shí)間，誰(shuí)會(huì)想到IE8還有這么挑剔的！

hover知識(shí)你懂多少？

CSS :hover 偽類(lèi)

定義和用法
:hover 偽類(lèi)在鼠標(biāo)移到元素上時(shí)向此元素添加特殊的樣式。

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

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

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

注釋?zhuān)簽榱水a(chǎn)生預(yù)期的效果，在 CSS 定義中，a:hover 必須位于 a:link 和 a:visited 之后！！

注釋?zhuān)簽榱水a(chǎn)生預(yù)期的效果，在 CSS 定義中，a:active 必須位于 a:hover 之后！！

注釋?zhuān)篜seudo-class（偽類(lèi)）的名稱(chēng)對(duì)大小寫(xiě)不敏感。

注釋?zhuān)簜晤?lèi)可與 CSS 類(lèi)配合使用：

a.red:visited {color: #FF0000;}
<a class="red" href="css_syntax.asp">CSS Syntax</a>

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

實(shí)例
規(guī)定鏈接的顏色：

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

瀏覽器支持
所有主流瀏覽器都支持 :hover 偽類(lèi)。

標(biāo)簽: hover  css