csshover.htc在IE7下使用:active伪类无效解决方法
csshover.htc在IE7下使用:active伪类无效解决方法
发布时间:2016-12-27 来源:查字典编辑
摘要:csshover相信做前端开发都知道,IE6、IE7都不支持:active伪类,IE6更甚,连:hover伪类都不支持。为了解决这个问题,一...

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></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"></div>

-----------------------------

或者增加选择符:

-----------------------------

.d{}

.d:hover{}

.b .d:active{}

<body>

<div id="d"></div>

</body>

-----------------------------

原因

导致该问题的原因,可能是因为给:hover和:active使用了同样的类选择符。此时需要给:active多增加一个类选择符或ID选择符,元素选择符的权重还不够。

htc文件是通过给元素添加类来实现效果变化,鼠标按下时,会给元素添加两个类:onhover和onactive,至于为何onactive的样式没生效,目前还不知道。

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新 Div+Css教程学习
热门 Div+Css教程学习
网页设计子分类