csshover.htc在IE7下使用:active偽類無效解決方法

2024-07-11 08:29:13

字體：大中小

來源：轉載

供稿：網友

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.不使用類選擇器?？梢允褂迷剡x擇符，或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的樣式沒生效，目前還不知道。

上一篇：css背景圖片的背景裁切、背景透明度、背景變換等效果運用

下一篇：利用UL、Li+CSS屬性制作無表格實用菜單導航效果