zoukankan      html  css  js  c++  java
  • csshover.htc CSS兼容

    以下为csshover.htc 内容
    
     
    
    <attach event="ondocumentready" handler="parseStylesheets" />
    <script language="JScript">
    
    var currentSheet, doc = window.document, activators = {
    onhover:{on:'onmouseover', off:'onmouseout'},
    onactive:{on:'onmousedown', off:'onmouseup'}
    }
    
    function parseStylesheets() {
    //window.alert("hi");
    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(!(/(^|s)(([^a]([^ ]+)?)|(a([^#.][^ ]+)+)):(hover|active)/i).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.*$/, '');
       var elements = getElementsBySelect(affected);
    
       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;
    node.attachEvent(events.on,
       function() { node.className += ' ' + className; });
    node.attachEvent(events.off,
       function() { node.className = 
        node.className.replace(new RegExp('\s+'+className, 'g'),''); });
    }
    
    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 classname = (/.([a-z0-9_-]+)/i).exec(select);
       var identify = (/#([a-z0-9_-]+)/i).exec(select);
       var tagName = select.replace(/(.|#|:)[a-z0-9_-]+/i, '');
       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((identify && node.id != identify[1]) || (classname && !(new RegExp('\b' +
          classname[1] + '\b').exec(node.className)))) continue;
         nodes[nodes.length] = node;
        }
       } return nodes;
    }
    </script>
    
    --------------------------------------
    
    使用方法
    
    <style type="text/css">
    
    body { behavior: url(csshover.htc); }   
    
    </style>
    
    ----------------------------------
    
    下面一个小例子,实现 li:hover 在IE6下有效。 测试平台 IETester IE6
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>无标题文档</title>
    <style type="text/css">
    body{ behavior:url("style/csshover.htc");}
    ul,li{list-style:none; margin:0; padding:0;}
    ul li{80px; height:30px; line-height:30px;}
    ul li ul {display:none; padding-left:10px;}
    ul li:hover ul {display:block;}
    </style>
    </head>
    
    <body>
    <div>
     <ul>
      <li><a href="#">一级菜单</a>
       <ul>
        <li><a href="#">二级菜单</a></li>
       </ul>
      </li>
     </ul>
    </div>
    </body>
    </html>
    
     
    
    附:JQuery解决方法:
    
     
    
    function hoverFunc(select, css){
    
        $(select).hover(
    
            function(){
    
                $(this).addClass(css);
    
            },
    
            function(){
    
                $(this).removeClass(css);
    
            }
    
        )
    
    }
    
    hoverFunc('#bt1', 't1_hover');
    
    hoverFunc('.exp_1', 'exp_1_hover');
  • 相关阅读:
    判断字符串是否包含某一个值方法
    生成一个随机手机号
    python 常用数据类型及操作方法
    selenium 常用的定位方法
    mysql 多表查询
    转载--python全栈开发学习
    Jenkins执行jmeter自动化脚本方法
    阅读方法
    pytorch学习
    英文阅读材料记录
  • 原文地址:https://www.cnblogs.com/zyl-Tara/p/5491185.html
Copyright © 2011-2022 走看看