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

所属分类: 网页制作 / CSS 阅读数: 1231
收藏 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盒模型宽和高

 出处:当我们布局一个网页的时候,经常会遇到这样的一种情况,那就是最终网页成型的宽度或是高度会超出我们预先的计算,其实就就是所谓的CSS的盒模型造成的。 #test{margin:10px;padding:10px;width:100px;height:100px;}
收藏 0 赞 0 分享

在IE流览器中正确显示PNG透明图片

  png图片有很好的品质。阴影效果也不会有杂边,很流畅。如果插入网页的话可以给网站内容增色不少!更重要的是在不增加图片容量大小的情况下提高了页面的图片的质量。对于有复杂背景,如:在有颜色过度背景上插入不规则边框的图片带来极大很便利!   但目前IE中对于插入
收藏 0 赞 0 分享

CSS教程:DIV底部放置文字

  css对文字的布局上没有靠容器底部对齐的参数,目前使用的一个不错的方法也比较好.就是用position属性来解决,看下面的代码,用position的相对和绝对定位功能也轻松的实现了,文字靠近div低部对齐,并且靠近的距离还可以精确到像素,自己可以调节,是不是很不错呢?
收藏 0 赞 0 分享

如何用CSS让文字居于div的底部

  这个问题是别人提出的,因为css对文字的布局上没有靠容器底部对齐的参数,(或许有但是我没有发现)不过目前我使用的一个不错的方法也比较好.就是用position属性来解决,看下面的代码,我用position的相对和绝对定位功能也轻松的实现了,文字靠近div低部对齐,并且靠近
收藏 0 赞 0 分享

从A页面连接到B页面后并直接把B页面的隐藏层显示

  这个效果实现的是,在B页面里有两个层,一个显示层,我们暂定名c层,一个是隐藏层,我们暂定名d层,单独进B页面的时候,c层显示,d层隐藏,然而从A页面连接到B页面的时候,则是让d层显示,c层隐藏,我觉得这个效果对网页设计者以后会有很大帮助,现在把代码发出来,
收藏 0 赞 0 分享

CSS样式表定义标签li前面样式

定义LI前面的小点样式 view plaincopy to clipboardprint? 语法: list-style-type : disc | circle | square | decimal | lower-roman | upper-roman | lowe
收藏 0 赞 0 分享

符合标准的div css制作的弹出菜单

本文介绍了五款符合标准的div css制作的弹出菜单,而且不含有js的. NO.1最基本的:二级dropdown弹出菜单 <!DOCTYPE html PUB
收藏 0 赞 0 分享

CSS实现在文章每段后面加入带连接的隐藏文字

代码主要理解3个参数:createElement、createTextNode、appendChild。这3个js参数分别是创建元素、创建字符、追加节点。代码原理:循环页面段落标签<p>,创建连接元素<a>,创建要显示的连接字符,用SetAttribute
收藏 0 赞 0 分享

CSS:浏览器特定选择器介绍

当你想在一个浏览器里改变样式而不像在其他浏览器中改变时,这些选择器很有用。 IE6以下 *html{} IE 7 以下 *:first-child html {} * html {} 只对IE 7 *:first-child html {} 只对IE 7
收藏 0 赞 0 分享

WEB标准学习,认识两种网页声明的含义

即网页标准推出来以后,我们时常会看到两种不同的网页的声明,一个是Dhtml,一个是Xhtml。如下所示: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "ht
收藏 0 赞 0 分享
查看更多