csshover.htc CSS兼容

最新推荐文章于 2021-06-24 06:39:04 发布

abc2346789

最新推荐文章于 2021-06-24 06:39:04 发布

阅读量165

点赞数

文章标签： xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/zyl-Tara/p/5491185.html

版权

以下为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{width: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');

转载于:https://www.cnblogs.com/zyl-Tara/p/5491185.html

abc2346789

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
csshover.htc CSS兼容

以下为csshover.htc 内容 <attach event="ondocumentready" handler="parseStylesheets" /><script language="JScript">var currentSheet, doc = window.document, activators = {onh...
复制链接

扫一扫