如何解決IE6下偽類hover失效的問題

如何解決IE6下偽類hover失效的問題，針對這個(gè)問題，這篇文章詳細(xì)介紹了相對應(yīng)的分析和解答，希望可以幫助更多想解決這個(gè)問題的小伙伴找到更簡單易行的方法。

第一篇：

在處理CSS的機(jī)制上，拿對偽類:hover的支持來說，IE7+添加了對a以外其它標(biāo)簽的支持，但在IE6下:hover就連對a的支持都不是那么的盡如人意。有的時(shí)候?yàn)榱嗽黾右恍┖唵蔚膭?dòng)態(tài)效果，常常會借助:hover的幫忙，比如我們時(shí)常會令鼠標(biāo)經(jīng)過鏈接時(shí)改變文字的顏色。

代碼如下:

a:hover{color:#F00;}  </p>
<p><a href ="#">鼠標(biāo)經(jīng)過時(shí)改變我的顏色</a>

在所有的瀏覽器中都生效。如果換成這樣：

代碼如下:

a:hover em{color:#F00;}
<a href ="#">鼠標(biāo)經(jīng)過時(shí)改變我的<em>顏色</em></a>

會發(fā)現(xiàn)在IE6-下什么都沒有發(fā)生，解決方法是只需要再添加一個(gè)a:hover{}樣式就可以了，里面可以是zoom,padding,margin等屬性。如下：

代碼如下:

a:hover{zoom:1;}  
a:hover em{color:#F00;}
<a href="#">鼠標(biāo)經(jīng)過時(shí)改變我的<em>顏色</em></a>

看著恢復(fù)了正常的效果，去想可能是因?yàn)槭裁丛斐?hover失效的。你可以使用zoom,display,padding等等屬性來搞定，于是想會不會是因?yàn)閔aslayout。恩，很有可能就是這樣。但你接著測試，會發(fā)現(xiàn)，不論你在a:hover{}寫入任何屬性，color啊，font-size啊，overflow啊（甚至是不存在的屬性，如xx:yyy），都可以使之恢復(fù)正常。

第二篇：

在ie6下如果直接在a的子標(biāo)簽span設(shè)置hover,而a:hover卻不作任何設(shè)置，則在ie6下直接對span的a:hover span{color:red;}會出現(xiàn)失效；但是如果對span的父標(biāo)簽a設(shè)置a:hover{ }則，對span的hover設(shè)置會重新有效。例如：

代碼如下:

<a href="###"><span>需要設(shè)置hover的內(nèi)容</span></a>
a span {color:red;}
a:hover span {color:blue;}

此時(shí)a:hover span 的設(shè)置在其他瀏覽器下都正常在ie6下卻沒有任何變化，原因是ie6對a:hover子標(biāo)簽的解讀是建立在父標(biāo)簽的hover設(shè)置上的，換句話說如果不設(shè)置任何父標(biāo)簽a:hover{}則ie6就會停止對a的子標(biāo)簽hover解讀，也就會出現(xiàn)ie6下a:hover設(shè)置失效的問題。解決方法：對父標(biāo)簽設(shè)置a:hover{color:blue;}其中父標(biāo)簽的hover也不是像網(wǎng)上說的隨意設(shè)置任意屬性就可以的；更不是必須和子標(biāo)簽的所有屬性設(shè)置重復(fù)一遍。如css設(shè)置成：

代碼如下:

a span {color:red;}a:hover {font-size:12px;}a:hover span {color:blue;}

ok,你現(xiàn)在對span的設(shè)置又重新有效了。

關(guān)于如何解決IE6下偽類hover失效的問題問題的解答就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關(guān)注億速云行業(yè)資訊頻道了解更多相關(guān)知識。