在ie6下,只支持a:hover的样式,不支持其他标签的:hover样式,为了解决ie6的这个hover兼容的问题,就要用到csshover.htc文件了
下面是csshover.htc的内容
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 parsestylesheet(sheets[i]); } function parsestylesheet(sheet) { if(sheet.imports) { try { var imports = sheet.imports, l = imports.length; for(var i=0; i } catch(securityexception){} } try { var rules = (currentsheet = sheet).rules, l = rules.length; for(var j=0; 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 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 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 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 result = tagname? elements[i].all.tags(tagname):elements[i].all; for(var j=0; j node = result[j]; if(classreg && !classreg.test(node.classname)) continue; nodes[nodes.length] = node; } } return nodes; } 这段代码粘贴后在dw里保存为csshover.htc文件就可以了 下面是在页面中因为这个文件,引入方法如下: body { behavior: url(csshover.htc); } /*注意路径*/ 现在就可以为不是a标签的其他标签定义:hover样式了,赶紧试试吧 更多信息请查看IT技术专栏