csshover.htc在IE7下使用:active偽類無效解決方法
發(fā)布時(shí)間：2012-12-24 09:15:06 作者：佚名 
我要評論
我要評論相信做前端開發(fā)都知道，IE6、IE7都不支持:active偽類，IE6更甚，連:hover偽類都不支持。為了解決這個(gè)問題，一般都會引入一個(gè)csshover.htc文件來解決,本文將介紹解決此問題的實(shí)現(xiàn)過程，需要了解的朋友可以參考下
csshover
相信做前端開發(fā)都知道，IE6、IE7都不支持:active偽類，IE6更甚，連:hover偽類都不支持。為了解決這個(gè)問題，一般都會引入一個(gè)csshover.htc文件來解決。
目前該文件版本為3.11，
如果你發(fā)現(xiàn)自己使用的不是最新的版本，趕緊更新吧。
Bug
在使用過程中，發(fā)現(xiàn)IE7的:active居然不起作用。做了一番測試，最后發(fā)現(xiàn)，原來是選擇符權(quán)重的問題。
失效的條件為：樣式選擇符都使用類選擇符。
示例代碼如下(需要IE7瀏覽)：
<!doctype html>
<head>
<style>
body { behavior:url("csshover3.htc"); }
.d{
width:200px;
height:200px;
background:yellow;
}
.d:hover{
background:green;
}
.d:active{
background:red;
}
</style>
</head>
<body>
<div class="d"></div>
</body>
此時(shí)鼠標(biāo)按下時(shí)是不會有變化的。
解決方案
A.不使用類選擇器?？梢允褂迷剡x擇符，或id選擇符。
B.增加:active偽類的權(quán)重。
對于A方案，可以修改選擇符為：
-----------------------------
div{}
div:hover{}
div:active{}
-----------------------------
或者：
-----------------------------
#d{}
#d:hover{}
#d:active{}
<div id="d"></div>
-----------------------------
對于B方案，可以按權(quán)重增加方式使用選擇符：
-----------------------------
div{}
.d:hover{}
#d:active{}
<div id="d" class="d"></div>
-----------------------------
或者增加選擇符：
-----------------------------
.d{}
.d:hover{}
.b .d:active{}
<body class="b">
<div id="d" class="d"></div>
</body>
-----------------------------
原因
導(dǎo)致該問題的原因，可能是因?yàn)榻o:hover和:active使用了同樣的類選擇符。此時(shí)需要給:active多增加一個(gè)類選擇符或ID選擇符，元素選擇符的權(quán)重還不夠。
htc文件是通過給元素添加類來實(shí)現(xiàn)效果變化，鼠標(biāo)按下時(shí)，會給元素添加兩個(gè)類:onhover和onactive，至于為何onactive的樣式?jīng)]生效，目前還不知道。
相信做前端開發(fā)都知道，IE6、IE7都不支持:active偽類，IE6更甚，連:hover偽類都不支持。為了解決這個(gè)問題，一般都會引入一個(gè)csshover.htc文件來解決。
目前該文件版本為3.11，
如果你發(fā)現(xiàn)自己使用的不是最新的版本，趕緊更新吧。
Bug
在使用過程中，發(fā)現(xiàn)IE7的:active居然不起作用。做了一番測試，最后發(fā)現(xiàn)，原來是選擇符權(quán)重的問題。
失效的條件為：樣式選擇符都使用類選擇符。
示例代碼如下(需要IE7瀏覽)：
復(fù)制代碼
代碼如下:<!doctype html>
<head>
<style>
body { behavior:url("csshover3.htc"); }
.d{
width:200px;
height:200px;
background:yellow;
}
.d:hover{
background:green;
}
.d:active{
background:red;
}
</style>
</head>
<body>
<div class="d"></div>
</body>
此時(shí)鼠標(biāo)按下時(shí)是不會有變化的。
解決方案
A.不使用類選擇器?？梢允褂迷剡x擇符，或id選擇符。
B.增加:active偽類的權(quán)重。
對于A方案，可以修改選擇符為：
-----------------------------
復(fù)制代碼
代碼如下:div{}
div:hover{}
div:active{}
-----------------------------
或者：
-----------------------------
復(fù)制代碼
代碼如下:#d{}
#d:hover{}
#d:active{}
<div id="d"></div>
-----------------------------
對于B方案，可以按權(quán)重增加方式使用選擇符：
-----------------------------
復(fù)制代碼
代碼如下:div{}
.d:hover{}
#d:active{}
<div id="d" class="d"></div>
-----------------------------
或者增加選擇符：
-----------------------------
復(fù)制代碼
代碼如下:.d{}
.d:hover{}
.b .d:active{}
<body class="b">
<div id="d" class="d"></div>
</body>
-----------------------------
原因
導(dǎo)致該問題的原因，可能是因?yàn)榻o:hover和:active使用了同樣的類選擇符。此時(shí)需要給:active多增加一個(gè)類選擇符或ID選擇符，元素選擇符的權(quán)重還不夠。
htc文件是通過給元素添加類來實(shí)現(xiàn)效果變化，鼠標(biāo)按下時(shí)，會給元素添加兩個(gè)類:onhover和onactive，至于為何onactive的樣式?jīng)]生效，目前還不知道。
相關(guān)文章
a標(biāo)簽的四個(gè)css偽類(link、visited、hover、active)樣式理解
偽類是CSS 用于向某些選擇器添加特殊的效果，chrome和firefox中的css監(jiān)控并不會顯示所有的樣式，有些顯示會有點(diǎn)不全，IE下還是有點(diǎn)問題的，不過大體不變2013-05-30鏈接偽類（:hover）CSS背景圖片有閃動(dòng)BUG的解決方法
IE6下鏈接偽類（:hover）CSS背景圖片有閃動(dòng)BUG，主要原因ie會再一次請求這張圖片，或者說圖片沒被緩存。2011-04-28- 在處理css的機(jī)制上，IE總是有很多讓人吐血的舉動(dòng)，但對于他們現(xiàn)在的改進(jìn)力度還是值得高興的。2009-12-08
CSS3實(shí)現(xiàn)偽類hover離開時(shí)平滑過渡效果示例
本篇文章主要介紹了CSS3實(shí)現(xiàn)偽類hover離開時(shí)平滑過渡效果示例，具有一定的參考價(jià)值，有興趣的可以了解一下2017-08-10