csshover.htc解决ie6下hover的兼容问题
来源: 阅读:537 次 日期:2014-10-27 09:13:45
温馨提示: 小编为您整理了“csshover.htc解决ie6下hover的兼容问题”,方便广大网友查阅!

在ie6下,只支持a:hover的样式,不支持其他标签的:hover样式,为了解决ie6的这个hover兼容的问题,就要用到csshover.htc文件了

下面是csshover.htc的内容

<attach event=ondocumentready handler=parsestylesheets />

<script>

var csshoverreg = /(^|\s)(([^a]([^ ]+)?)|(a([^#.][^ ]+)+)):(hover|active)/i,

currentsheet, doc = window.document, hoverevents = [], activators = {

onhover:{on:'onmouseover', off:'onmouseout'},

onactive:{on:'onmousedown', off:'onmouseup'}

}

function parsestylesheets() {

if(!/msie (5|6)/.test(navigator.useragent)) return;

window.attachevent('onunload', unhookhoverevents);

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(!csshoverreg.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|active).*$/, '');

var elements = getelementsbyselect(affected);

if(elements.length == 0) return;

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;

hookhoverevent(node, events.on, function() { node.classname += ' ' + classname; });

hookhoverevent(node, events.off, function() { node.classname = node.classname.replace(new regexp('\\s+'+classname, 'g'),''); });

}

function hookhoverevent(node, type, handler) {

node.attachevent(type, handler);

hoverevents[hoverevents.length] = {

node:node, type:type, handler:handler

};

}

function unhookhoverevents() {

for(var e,i=0; i<hoverevents.length; i++) {

e = hoverevents[i];

e.node.detachevent(e.type, e.handler);

}

}

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 identify = (/\#([a-z0-9_-]+)/i).exec(select);

if(identify) {

var element = doc.getelementbyid(identify[1]);

return element? [element]:nodes;

}

var classname = (/\.([a-z0-9_-]+)/i).exec(select);

var tagname = select.replace(/(\.|\#|\:)[a-z0-9_-]+/i, '');

var classreg = classname? new regexp('\\b' + classname[1] + '\\b'):false;

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(classreg && !classreg.test(node.classname)) continue;

nodes[nodes.length] = node;

}

}

return nodes;

}

</script>

这段代码粘贴后在dw里保存为csshover.htc文件就可以了

下面是在页面中因为这个文件,引入方法如下:

<style type=text/css media=screen>

body { behavior: url(csshover.htc); } /*注意路径*/

</style>

现在就可以为不是a标签的其他标签定义:hover样式了,赶紧试试吧

更多信息请查看IT技术专栏

更多信息请查看网页制作
由于各方面情况的不断调整与变化, 提供的所有考试信息和咨询回复仅供参考,敬请考生以权威部门公布的正式信息和咨询为准!

2025国考·省考课程试听报名

  • 报班类型
  • 姓名
  • 手机号
  • 验证码
关于我们 | 联系我们 | 人才招聘 | 网站声明 | 网站帮助 | 非正式的简要咨询 | 简要咨询须知 | 加入群交流 | 手机站点 | 投诉建议
工业和信息化部备案号:滇ICP备2023014141号-1 云南省教育厅备案号:云教ICP备0901021 滇公网安备53010202001879号 人力资源服务许可证:(云)人服证字(2023)第0102001523号
云南网警备案专用图标
联系电话:0871-65317125(9:00—18:00) 获取招聘考试信息及咨询关注公众号:
咨询QQ:526150442(9:00—18:00)版权所有:
云南网警报警专用图标
Baidu
map