手机
当前位置:查字典教程网 >网页设计 > Div+Css教程 >csshover.htc在IE7下使用:active伪类无效解决方法
csshover.htc在IE7下使用:active伪类无效解决方法
摘要: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的样式没生效,目前还不知道。

【csshover.htc在IE7下使用:active伪类无效解决方法】相关文章:

jQuery 屏蔽单个元素使用户无法点击

div嵌套 img 空白解决方法

ie6不兼容hover ie6 a hover属性失效解决办法

css控制div不能居中的解决办法

使用CSS中的meta实现web定时刷新或跳转的方法

firefox和谷歌不显示body背景图片的解决方法

DIV下图片自适应解决方法

在ie7下css居中样式text-align:center;偏左问题解决方法

DIV+CSS页面布局中BUG解决方法

CSS div居中的三种方法

精品推荐
分类导航