美文网首页
csshover.htc IE6兼容hover

csshover.htc IE6兼容hover

作者: 觉不够睡的早班车 | 来源:发表于2016-06-22 14:50 被阅读427次

背景:IE6浏览器只支持a标签的hover属性,如果想在li等标签应用hover,IE6下解决办法:引入csshover.htc文件。
使用方法:复制下面代码,保存成csshover.htc文件

  <!--[if IE 6]>
    <style>
    body {behavior: url("csshover.htc");}
    </style>
    <![endif]-->

以上代码放入title标签中
下面是csshover.htc文件

<public:attach event="ondocumentready" onevent="CSSHover()" />
<script>
/**
 * Whatever:hover - V3.11
 * http://www.xs4all.nl/~peterned/
 *  
 * Copyright (c) 2009 Peter Nederlof
 * Licensed under the LGPL license
 * http://creativecommons.org/licenses/LGPL/2.1
 */
window.CSSHover=(function(){var m=/(^|\s)((([^a]([^ ]+)?)|(a([^#.][^ ]+)+)):(hover|active|focus))/i;var n=/(.*?)\:(hover|active|focus)/i;var o=/[^:]+:([a-z\-]+).*/i;var p=/(\.([a-z0-9_\-]+):[a-z]+)|(:[a-z]+)/gi;var q=/\.([a-z0-9_\-]*on(hover|active|focus))/i;var s=/msie (5|6|7)/i;var t=/backcompat/i;var u={index:0,list:['text-kashida','text-kashida-space','text-justify'],get:function(){return this.list[(this.index++)%this.list.length]}};var v=function(c){return c.replace(/-(.)/mg,function(a,b){return b.toUpperCase()})};var w={elements:[],callbacks:{},init:function(){if(!s.test(navigator.userAgent)&&!t.test(window.document.compatMode)){return}var a=window.document.styleSheets,l=a.length;for(var i=0;i<l;i++){this.parseStylesheet(a[i])}},parseStylesheet:function(a){if(a.imports){try{var b=a.imports;var l=b.length;for(var i=0;i<l;i++){this.parseStylesheet(a.imports[i])}}catch(securityException){}}try{var c=a.rules;var r=c.length;for(var j=0;j<r;j++){this.parseCSSRule(c[j],a)}}catch(someException){}},parseCSSRule:function(a,b){var c=a.selectorText;if(m.test(c)){var d=a.style.cssText;var e=n.exec(c)[1];var f=c.replace(o,'on$1');var g=c.replace(p,'.$2'+f);var h=q.exec(g)[1];var i=e+h;if(!this.callbacks[i]){var j=u.get();var k=v(j);b.addRule(e,j+':expression(CSSHover(this, "'+f+'", "'+h+'", "'+k+'"))');this.callbacks[i]=true}b.addRule(g,d)}},patch:function(a,b,c,d){try{var f=a.parentNode.currentStyle[d];a.style[d]=f}catch(e){a.runtimeStyle[d]=''}if(!a.csshover){a.csshover=[]}if(!a.csshover[c]){a.csshover[c]=true;var g=new CSSHoverElement(a,b,c);this.elements.push(g)}return b},unload:function(){try{var l=this.elements.length;for(var i=0;i<l;i++){this.elements[i].unload()}this.elements=[];this.callbacks={}}catch(e){}}};var x={onhover:{activator:'onmouseenter',deactivator:'onmouseleave'},onactive:{activator:'onmousedown',deactivator:'onmouseup'},onfocus:{activator:'onfocus',deactivator:'onblur'}};function CSSHoverElement(a,b,c){this.node=a;this.type=b;var d=new RegExp('(^|\\s)'+c+'(\\s|$)','g');this.activator=function(){a.className+=' '+c};this.deactivator=function(){a.className=a.className.replace(d,' ')};a.attachEvent(x[b].activator,this.activator);a.attachEvent(x[b].deactivator,this.deactivator)}CSSHoverElement.prototype={unload:function(){this.node.detachEvent(x[this.type].activator,this.activator);this.node.detachEvent(x[this.type].deactivator,this.deactivator);this.activator=null;this.deactivator=null;this.node=null;this.type=null}};window.attachEvent('onbeforeunload',function(){w.unload()});return function(a,b,c,d){if(a){return w.patch(a,b,c,d)}else{w.init()}}})();
</script>

相关文章

  • csshover.htc IE6兼容hover

    背景:IE6浏览器只支持a标签的hover属性,如果想在li等标签应用hover,IE6下解决办法:引入cssho...

  • 第七天

    1、css伪类 :link所有未被访问的超级链接。IE6不兼容,解决此问题,直接使用a标签。 :hover伪类将应...

  • css基础——2017.2.21

    css伪类 :link 伪类将应用于未被访问过的链接。IE6不兼容,解决此问题,直接使用a标签 :hover 伪类...

  • CSS基础笔记三

    一、伪类 1.:link 伪类将应用于未被访问过的链接。IE6不兼容,解决此问题,直接使用a标签。 :hover ...

  • GraphicsJs图形库使用总结

    svg 兼容ie6 文章学习

  • 4.2.2.1定宽与自适应与4.2.2.1不定宽与自适应

    优点:简单 缺点:不兼容IE6 优点:兼容性好 缺点:结构多一点 优点:样式简单 缺点:不兼容IE6 同样适用于不...

  • jQuery学习(一)

    版本: jq1.x.x:兼容ie6+ jq2.x.x:不兼容ie6,7,8 jq3.x.x:兼容ie6,7,8,而...

  • css-兼容

    1, IE6 不支持 display:inline-block; ? IE6 兼容行内标签的display:inl...

  • 10css兼容性问题

    margin兼容性问题 display:inline-block IE6 最小高度问题 IE6 双边距 li里元素...

  • H5--video

    video 基本介绍 支持格式:MP4、WebM、Ogg。 兼容性:IE6 7 8 不兼容,此外,即使在兼容的版本...

网友评论

      本文标题:csshover.htc IE6兼容hover

      本文链接:https://www.haomeiwen.com/subject/ojfndttx.html