让IE6支持hover伪类效果
2014-04-17 10:00
260 查看
让IE6支持hover伪类效果
:hover是在CSS中用来制作效果最常用到的一个伪类。比如:链接的鼠标悬停效果 a:hover 。 但用在比如li:hover 上再IE6下就没有效果,而Firefox下却解析正常。这样一来在Firefox下有漂亮的 hover 效果的标签用IE6来打开就会失去不少亮丽的风景了,然而 firefox 的用户有实在太少了,难道你小区旁边的网吧里都装了firefox 来作为默认的浏览器? 方法一: IE6下用JS是可以实现部分hover效果: <style type=”text/css”> p:hover, p.hover { background:#eee; } </style> 下面这段代码要放到页面的底部在</body> 前: <script type=”text/javascript”> <!– // 让所有标记支持hover function $(){ if(document.all){ // 判断是否IE浏览器 var obj=document.all; for(var i=0;i<obj.length;i++){ obj[i].onmouseover=function(){ this.className=”hover” } ; obj[i].onmouseout=function(){ this.className=”" } } } } $(); //–> </script> 方法二: hover.htc文件将下面代码 写入hover.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> 页面中添加引用 CSS code body { behavior: url(../css/hover.htc); } |
相关文章推荐
- 关于CSS在IE6以下浏览器不支持:hover伪类的解决方式
- IE6下支持li:hover的鼠标滑过效果,方法绝对正确,我已测试过
- IE6不支持非A元素:hover伪类的bug的处理
- 使ie6 支持:hover等伪类
- 使IE6支持:hover效果使用li:hover或div:hover
- 【技术帖】IE6所有标签元素支持hover伪类的解决方案
- 解决IE6不支持li:hover鼠标经过的效果
- ie6不支持hover ie6 标签(除a标签)不支持伪类:hover解决方案
- ie6不支持 形如a:hover span{} bug
- CSS a:hover伪类在IE6下的问题
- 关于IE6下a标签的a:hover伪类失效的问题
- 一个png图片按钮效果,用css sprite,支持ie6
- 原创 让IE6也支持hover[JS模拟]
- 上传图片之前预览的效果(支持所有浏览器,包括IE6-8,chrome,opera,firefox等)
- css3pie.让ie6,7,8也能支持css3部分效果
- IE6下伪类hover失效问题及解决办法
- IE6不支持li:hover的解决办法,一句代码让IE6支持li:hover
- css3pie.让ie6,7,8也能支持css3部分效果
- Whatever:hover – 无需javascript让IE支持丰富伪类
- IE6不支持<a>标签以外元素的hover的解决方案