csshover.htc在IE7下使用:active伪类无效解决方法

ttx9n · 发表于 2012-12-24 09:15:06

相信做前端开发都知道，IE6、IE7都不支持:active伪类，IE6更甚，连:hover伪类都不支持。为了解决这个问题，一般都会引入一个csshover.htc文件来解决,本文将介绍解决此问题的实现过程，需要了解的朋友可以参考下 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的样式没生效，目前还不知道。

81708585 · 发表于 2022-10-13 05:14:03

挺不错的东西

x20yd3qx · 发表于 2022-12-28 08:07:48

额头额定法国队是范德萨

3t0ukmu · 发表于 2023-2-13 09:06:22

很不错的样子

pwseqn1h · 发表于 2023-10-16 16:12:06

建军节建军节建军节建军节

回复用户5 · 发表于 2023-11-9 11:23:52

强烈支持楼主ing……

Anthonylam · 发表于 2023-11-16 01:10:10

大家都不容易！

qzdhcgs · 发表于 2023-12-1 08:53:51

谢谢小Y分享

hd1tvqb3 · 发表于 2024-3-20 12:02:14

还不错啊

j__j33p · 发表于 2024-5-22 19:39:53

啦啦啦啦啦德玛西亚

账号		自动登录	找回密码
密码			立即注册

[CSS] csshover.htc在IE7下使用:active伪类无效解决方法

相关帖子