csshover.htc在IE7下应用:active伪类失效处理方式

日期:2021-01-20 类型:科技新闻 

关键词:微信公众号平台小程序,微信打分小程序,小程序发布,小程序大全,微信小程序编程

csshover
坚信做前端开发开发设计都了解,IE6、IE7都不适用:active伪类,IE6愈甚,连:hover伪类都不适用。以便处理这个难题,1般都会引进1个csshover.htc文档来处理。
现阶段该文档版本号为3.11,
假如你发现自身应用的并不是全新的版本号,赶快升级吧。
Bug
在应用全过程中,发现IE7的:active竟然不起功效。做了1番检测,最终发现,原先是挑选符权重的难题。
无效的标准为:款式挑选符都应用类挑选符。
示例编码以下(必须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多提升1个类挑选符或ID挑选符,元素挑选符的权重还不足。
htc文档是根据给元素加上类来完成实际效果转变,电脑鼠标按下时,会给元素加上两个类:onhover和onactive,至于为什么onactive的款式没起效,现阶段还不知道道。
上一篇:CSS调剂DIV最少高宽比难题讨论 返回下一篇:没有了