`
fengzifz
  • 浏览: 3800 次
最近访客 更多访客>>
社区版块
存档分类
最新评论

让IE6支持伪类(Pseudo-classes)

阅读更多
在网上都可以搜索到相关的,之所以再发表一次,是为了自己以后方便查看。
由于不知道原作者是谁,望不要追究版权问题。

回到主题,ie6除了<a>外,其他标签不支持伪类,用下面的代码来使ie6支持。
把下面/*解决ie6.0 的hover兼容问题*/的代码保存为 .htc 文件
然后在body标签中加上即可让ie6兼容伪类
body { behavior:url("csshover.htc"); }



/*解决ie6.0 的hover兼容问题*/
<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>
分享到:
评论

相关推荐

    E5,IE6,IE7,IE8的css兼容性列表

    - CSS2.1的类选择器和ID选择器在所有版本的IE中都有不同程度的支持,但IE5.0和5.5对类选择器有限制,最多只能有两个类选择器。 - 类型选择器(如`E { sRules }`)和通配符选择器(如`* { sRules }`)在所有版本的...

    IE5,IE6,IE7,IE8的css兼容性列表

    最后,我们讨论Pseudo-classes,伪类。在CSS2.1中,:active、:first-child、:focus、:hover和:link等在IE5和IE5.5中支持有限,而:visited在所有IE版本中都得到支持。CSS3的:lang(C)和:hover在IE8之前不完全支持,:...

    伪标签的解决

    在网页设计和开发中,伪类(Pseudo-classes)和伪元素(Pseudo-elements)是CSS中的关键概念,它们允许我们对特定的元素状态或元素内的特定部分进行样式控制,而无需创建额外的HTML标签。标题“伪标签的解决”暗示...

    jQuery和CSS3仿Apple TV海报背景视觉差特效 ie10+

    4. **伪类和伪元素(Pseudo-classes and Pseudo-elements)**:如`:hover`、`:active`等,用于在特定状态时应用不同的样式。 5. **多列布局(Multiple Column Layout)**:使得元素可以按列布局,适应不同屏幕尺寸。...

    css手册chm版

    它进一步增强了样式表的功能,包括但不限于:模块化发展(如边框和背景、选择器、布局等),新增了多种过渡(transitions)、动画(animations)、伪元素(pseudo-elements)和伪类(pseudo-classes),以及响应式...

    CSS2.0帮助文档 - 3.0帮助文档 - 4.0帮助文档

    8. Pseudo-classes和Pseudo-elements:使用伪类和伪元素实现交互式和装饰性效果。 9. CSS预处理器:如Sass和Less,它们能提高CSS的可维护性和效率。 10. CSS新特性:关注最新的CSS4提案,如变量、自适应单位和模块化...

    纯css实现的动感导航栏源码,动画效果不兼容IE浏览器

    3. **伪类选择器(Pseudo-Classes)**:`:hover`、`:active`和`:focus`等伪类选择器是CSS中用于处理元素不同状态的关键工具。在导航栏中,这些选择器可以帮助我们实现鼠标悬停、点击和获取焦点时的不同视觉反馈。 ...

    CSS3笔记1

    6. **结构伪类选择器**(Structural Pseudo-classes):如`:nth-child(n)`选择父元素的第n个子元素。 ### CSS3新特性 - **多背景**(Multiple Backgrounds):允许一个元素有多个背景图像,通过逗号分隔。 - **凹凸...

    纯CSS制作支持IE6、IE7、Firefox的下拉菜单特效代码

    4. **伪类选择器(Pseudo-classes)**:`:hover`伪类用于在鼠标悬停时改变元素的样式,这对于创建下拉菜单的显示和隐藏效果非常有用。 5. **相对和绝对定位(Positioning)**:为了实现下拉菜单在主菜单项下方出现...

    CSS3绿色条纹loading进度条代码,适合做响应式页面的加载过度页。兼容主流浏览器

    3. **伪类选择器(Pseudo-classes)**:像`:before`和`:after`这样的伪类选择器可以用来添加内容或者为元素添加特殊样式,可能是用来创建条纹或者进度条的边框。 4. **响应式设计(Responsive Design)**:为了适应...

    CSS3科技雷达扫描动画特效.zip

    4. **Selectors和Pseudo-classes**:CSS3引入了更强大的选择器和伪类,如`:hover`、`:active`和`:focus`,使得在特定交互下触发动画变得简单。在雷达扫描效果中,可能通过`:hover`伪类,当鼠标悬停时启动动画。 5. ...

    css2.0帮助文档

    Pseudo-Elements和Pseudo-Classes CSS2.0引入了伪元素(如`::before`和`::after`)和伪类,用于在元素内部添加内容或针对特定状态改变样式。 ### 13. 字体下载与Web字体 CSS2.0允许通过`@font-face`规则指定远程...

    css帮助文档

    1. **伪类(Pseudo-classes)**:如`:hover`、`:active`、`:focus`用于定义元素在特定状态下的样式。 2. **伪元素(Pseudo-elements)**:如`::before`和`::after`在元素内容前或后插入内容。 3. **属性选择器**:...

    css3仪表盘提示登录密码强度特效

    CSS3提供了丰富的选择器、过渡(transition)、动画(animation)以及伪类(pseudo-classes)等功能,使得动态效果的实现变得可能。例如,通过监听`input`事件,我们可以使用JavaScript改变`&lt;meter&gt;`元素的值,以...

    CSS网站布局实录

    5. **伪类(Pseudo-Classes)**:如 `a.od:link`, `a.od:visited`, `a.od:hover`, `a.od:active` 分别表示链接未访问时、已访问后、鼠标悬停时以及被激活时的状态,这使得可以轻松地为这些状态定义不同的样式。...

    2015-Yaocc-NAV

    6. **CSS选择器**:高效的CSS选择器可以精确定位并操作DOM元素,项目可能使用了高级选择器,如伪类(Pseudo-classes)、伪元素(Pseudo-elements)等,来实现特定状态的样式控制。 7. **CSS优化**:为了提高页面...

    gda-events-manager

    9. **Pseudo-classes与Pseudo-elements**:如`:hover`、`:active`、`:focus`伪类用于实现元素在特定状态下的样式,而`::before`和`::after`伪元素则可以添加额外的内容到元素前后。 10. **CSS性能优化**:包括减少...

    NewwebARTest01:NewwebARTest01

    8. Pseudo-elements与Pseudo-classes:伪元素如`:before`和`:after`用于在元素内容前后插入额外内容;伪类如`:hover`、`:active`、`:focus`则用于在元素处于特定状态时应用样式。 9. CSS预处理器:Sass、Less和...

    列夫斯基

    8. Pseudo-classes和Pseudo-elements:`:hover`、`:active`、`:focus`等伪类用于根据元素状态添加样式,而`:before`和`:after`伪元素则可以在元素前后插入内容。 9. CSS Grid Layout和Flexbox的结合:在某些复杂...

Global site tag (gtag.js) - Google Analytics