|
|
|
|
|
hover在css里比較常見,多用于菜單或一些按鈕上的鼠標事件,用法也比較簡單,不難掌握。
不過在瀏覽器兼容性測試中,發(fā)現(xiàn)ie瀏覽器對hover還是很挑剔的,html寫法會影響hover是否有效。
我們先比較看看下面兩組html代碼的寫法:
代碼一:
<ul>
<li><a href="http://howtostagehomes.com/ping.aspx" class="ping-menu">ping<span/></a></li>
<li><a href="http://howtostagehomes.com/tracert.aspx" class="tracert-menu">tracert<span/></a></li>
<li><a href="http://howtostagehomes.com/dns/" class="dns-menu">dns<span/></a></li>
<li><a href="http://howtostagehomes.com/webspeed/" class="webspeed-menu">webspeed<span/></a></li>
</ul>
代碼二:
<ul>
<li><a href="http://howtostagehomes.com/ping.aspx" class="ping-menu">ping<span></span></a></li>
<li><a href="http://howtostagehomes.com/tracert.aspx" class="tracert-menu">tracert<span></span></a></li>
<li><a href="http://howtostagehomes.com/dns/" class="dns-menu">dns<span></span></a></li>
<li><a href="http://howtostagehomes.com/webspeed/" class="webspeed-menu">webspeed<span></span></a></li>
</ul>
細心些你會發(fā)現(xiàn),<span>標簽的差異,但是在這次瀏覽器兼容性測試中發(fā)現(xiàn),第一種代碼的寫法,即<span/>,在IE8里不能正確執(zhí)行hover鼠標事件,而第二種代碼的寫法,<span></span>在IE8里能正確執(zhí)行hover鼠標事件。不過,其他瀏覽器兩種寫法均可。
這次勘查用了很多時間,誰會想到IE8還有這么挑剔的!
hover知識你懂多少?
CSS :hover 偽類
定義和用法
:hover 偽類在鼠標移到元素上時向此元素添加特殊的樣式。
說明
這個偽類應用處于“懸停狀態(tài)”的元素。懸停定義為用戶指示了一個元素但沒有將其激活。對此最常見的例子是將鼠標指針移到 HTML 文檔中一個超鏈接的邊界范圍內(nèi)。理論上,其他元素也可以處于懸停狀態(tài),不過 CSS 沒有定義究竟是哪些元素。
激活的、已訪問的、未訪問的或者當有鼠標懸停在其上的鏈接,它們會在支持 CSS 的瀏覽器中以不同的方式顯示出來:
a:link {color: #FF0000} /* 未訪問的鏈接 */
a:visited {color: #00FF00} /* 已訪問的鏈接 */
a:hover {color: #FF00FF} /* 當有鼠標懸停在鏈接上 */
a:active {color: #0000FF} /* 被選擇的鏈接 */
注釋:為了產(chǎn)生預期的效果,在 CSS 定義中,a:hover 必須位于 a:link 和 a:visited 之后??!
注釋:為了產(chǎn)生預期的效果,在 CSS 定義中,a:active 必須位于 a:hover 之后?。?/p>
注釋:Pseudo-class(偽類)的名稱對大小寫不敏感。
注釋:偽類可與 CSS 類配合使用:
a.red:visited {color: #FF0000;}
<a class="red" href="css_syntax.asp">CSS Syntax</a>
如果上面這個例子中的鏈接已訪問過,那么它會顯示為紅色。
實例
規(guī)定鏈接的顏色:
a:link {color: #FF0000} /* 未訪問的鏈接 */
a:visited {color: #00FF00} /* 已訪問的鏈接 */
a:hover {color: #FF00FF} /* 當有鼠標懸停在鏈接上 */
a:active {color: #0000FF} /* 被選擇的鏈接 */
瀏覽器支持
所有主流瀏覽器都支持 :hover 偽類。