csshover
相信做前端開發(fā)都知道，IE6、IE7都不支持:active偽類，IE6更甚，連:hover偽類都不支持。為了解決這個問題，一般都會引入一個csshover.htc文件來解決。
目前該文件版本為3.11，
下載地址：http://peterned.home.xs4all.nl/csshover.html
如果你發(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>
此時鼠標按下時是不會有變化的。
解決方案
A.不使用類選擇器。可以使用元素選擇符，或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)致該問題的原因，可能是因為給:hover和:active使用了同樣的類選擇符。此時需要給:active多增加一個類選擇符或ID選擇符，元素選擇符的權(quán)重還不夠。
htc文件是通過給元素添加類來實現(xiàn)效果變化，鼠標按下時，會給元素添加兩個類:onhover和onactive，至于為何onactive的樣式?jīng)]生效，目前還不知道。
新聞熱點
疑難解答
