| 标题 | 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样式了，赶紧试试吧 |
| 随便看 |
|
在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。