csshover.htc可以解决ie6下hover不起作用等兼容问题

所属分类: 网页制作 / CSS 阅读数: 1226
收藏 0 赞 0 分享
在ie6 下只有a 才支持:hover 伪类,其它标签都不支持,现在可以通过 csshover.htc 可以解决 ie6 的 hover 兼容问题。
它利用 javascript 脚本来给元素的的样式定义,如果检测到 hover 定义,就给元素设置 onmouseover 和 onmouseout 事件,以此来实现 hover 的效果。
以下是 csshover.htc 代码

复制代码
代码如下:

<attach event="ondocumentready" handler="parseStylesheets"/>
<script language="JScript">
var currentSheet, doc = window.document, activators = {
onhover:{on:'onmouseover', off:'onmouseout'},
onactive:{on:'onmousedown', off:'onmouseup'}
};
function parseStylesheets(){
var sheets = doc.styleSheets, l = sheets.length;
for(var i = 0; i < l; i++){
parseStylesheet(sheets[i]);
};
};
function parseStylesheet(sheet){
if(sheet.imports){
try{
var imports = sheet.imports, l = imports.length;
for(var i = 0; i < l; i++){
parseStylesheet(sheet.imports[i]);
};
}catch(securityException){};
};
try{
var rules = (currentSheet = sheet).rules, l = rules.length;
for(var j = 0; j < l; j++){
parseCSSRule(rules[j]);
};
}catch(securityException){};
};
function parseCSSRule(rule){
var select = rule.selectorText, style = rule.style.cssText;
if(!(/(^|\s)(([^a]([^ ]+)?)|(a([^#.][^ ]+)+)):(hover|active)/i).test(select) || !style) return;
var pseudo = select.replace(/[^:]+:([a-z-]+).*/i, 'on$1');
var newSelect = select.replace(/(\.([a-z0-9_-]+):[a-z]+)|(:[a-z]+)/gi, '.$2' + pseudo);
var className = (/\.([a-z0-9_-]*on(hover|active))/i).exec(newSelect)[1];
var affected = select.replace(/:hover.*$/, '');
var elements = getElementsBySelect(affected);
currentSheet.addRule(newSelect, style);
for(var i = 0; i < elements.length; i++){
new HoverElement(elements[i], className, activators[pseudo]);
};
};
function HoverElement(node, className, events){
if(!node.hovers) node.hovers = {};
if(node.hovers[className]) return;
node.hovers[className] = true;
node.attachEvent(events.on, function(){
node.className += ' ' + className;
});
node.attachEvent(events.off, function(){
node.className = node.className.replace(new RegExp('\\s+'+className, 'g'),'');
});
};
function getElementsBySelect(rule){
var parts, nodes = [doc];
parts = rule.split(' ');
for(var i = 0; i < parts.length; i++){
nodes = getSelectedNodes(parts[i], nodes);
};
return nodes;
};
function getSelectedNodes(select, elements){
var result, node, nodes = [];
var classname = (/\.([a-z0-9_-]+)/i).exec(select);
var identify = (/\#([a-z0-9_-]+)/i).exec(select);
var tagName = select.replace(/(\.|\#|\:)[a-z0-9_-]+/i, '');
for(var i = 0; i < elements.length; i++){
result = tagName ? elements[i].all.tags(tagName) : elements[i].all;
for(var j = 0; j < result.length; j++){
node = result[j];
if((identify && node.id != identify[1]) || (classname && !(new RegExp('\\b' + classname[1] + '\\b').exec(node.className)))) continue;
nodes[nodes.length] = node;
};
};
return nodes;
};
</script>

使用方法

复制代码
代码如下:

body{behavior:url(css/csshover.htc);}

注意
在引用 csshover.htc 时,不管你是在 css 文件里面引用 htc 文件,还是 html 里面引用 htc 文件,都是 html 文件去找 htc 的路径。也就是说路径一定要相对根目录或用绝对路径。
更多精彩内容其他人还在看

CSS样式分离之再分离达到精简与重用

无论是CSS的分离还是js的分离,其主要作用之一就是精简与重用,CSS本身就代表着精简与重用,CSS样式分离,我一般指的是“以单独的CSS文件将CSS样式分离出来”,此处的重用多针对不同页面的重用,就是说,一个样式文件,可以多个页面使用,这对于一些公共样式的重构是很有
收藏 0 赞 0 分享

CSS属性behavior的语法使用说明

在进行CSS网页布局的时候,我们经遇到刷新要保留表单里内容的时候,习惯的做法使用cookie,但是那样做实在是很麻烦,css中的behavior就为我们很好的解决了这个问题。今天jb51.net就向大家介绍CSS属性behavior的语法
收藏 0 赞 0 分享

网页制作中的水平居中和垂直居中解决方法集合

 在定义网页的CSS样式的时候,我们或许并不怎么用到垂直居中。
收藏 0 赞 0 分享

最常见IE的Bug及其fix修复方法

Internet Explorer – Web程序员的毒药。在IE上开发时间中有超过60%的时间是花在和IE的bug进行搏斗,让你的开发生产率严重下降。下面是一个教程,告诉你9个IE上最常见的BUG以及如何解决它们。
收藏 0 赞 0 分享

CSS常用浏览器兼容调整小结

用CSS+DIV来写网站代码的好处显而易见,这里不多说了,但由于不同浏览器对CSS的解释不统一,造成不同浏览器下页面错位的现象十分常见……
收藏 0 赞 0 分享

css firefox火狐浏览器下的兼容性问题

css firefox火狐浏览器下的兼容性问题
收藏 0 赞 0 分享

DIV+CSS 浏览器兼容性小结

在网站设计的时候,应该注意css样式兼容不同浏览器问题,特别是对完全使用DIV CSS设计的网,就应该更注意IE6 IE7 FF对CSS样式的兼容,不然,你的网乱可能出去不想出现的效果!
收藏 0 赞 0 分享

div+css 布局常识 8问

CSSer与其他IT职位一样,在找工作的时候,都会面临着面试官提出的问题,或者给出的试卷。今天jb51.net收集了常见的8条面试题目,希望对您有所帮助。
收藏 0 赞 0 分享

CSS用四种方式实现布局

CSS用四种方式实现布局
收藏 0 赞 0 分享

css 解决表格边框不显示的问题

在 IE6 中,当表格单元格中的数据为空时,边框是不显示的,在IE8中是会显示的,怎样解决这个不兼容的问题呢。
收藏 0 赞 0 分享
查看更多