csshover
相信做前端開發都知道，IE6、IE7都不支持:active偽類，IE6更甚，連:hover偽類都不支持。為了解決這個問題，一般都會引入一個csshover.htc文件來解決。
目前該文件版本為3.11，
如果你發現自己使用的不是最新的版本，趕緊更新吧。
Bug
在使用過程中，發現IE7的:active居然不起作用。做了一番測試，最后發現，原來是選擇符權重的問題。
失效的條件為：樣式選擇符都使用類選擇符。
示例代碼如下(需要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偽類的權重。
對于A方案，可以修改選擇符為：
—————————–
div{}
div:hover{}
div:active{}
—————————–
或者：
—————————–
#d{}
#d:hover{}
#d:active{}
<div id=”d”></div>
—————————–
對于B方案，可以按權重增加方式使用選擇符：
—————————–
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>
—————————–
原因
導致該問題的原因，可能是因為給:hover和:active使用了同樣的類選擇符。此時需要給:active多增加一個類選擇符或ID選擇符，元素選擇符的權重還不夠。
htc文件是通過給元素添加類來實現效果變化，鼠標按下時，會給元素添加兩個類:onhover和onactive，至于為何onactive的樣式沒生效，目前還不知道。
新聞熱點
疑難解答
