让IE6支持非a标签的hover属性

自从windows7推出以后，IE9也随之而来，但很多人还是喜欢用旧版本，并且相当一部分个人和企业都在使用IE6，不得不承认IE6是一款很成功的产品，但英雄总有暮年时，该退还得退，世界是在不断的更迭中丰富多彩的。既然有人习惯于旧事物，那么身为一名为人民服务的程序员，就得全心全意为客户。

目前CSS最新版是CSS3，而IE6支持的是CSS1.0，因此IE6不支持CSS中一些新特性。这次项目，要做下拉菜单，IE6不支持非a标签的hover属性，不得不采用HTML组件，虽然效果一般，但能实现功能。自Internet Explorer 5开始微软引入了HTML组件（Html Components）的概念，详见百度百科，HTML组件扩展名是.htc。

想要和其他浏览器一样使用hover的话，首先需要建立一个hover.htc的文件，将如下代码拷贝进去。

[javascript] view plain copy

1. <attachevent="ondocumentready"handler="parseStylesheets"/>
2. <script>
5. varcsshoverReg=/(^|\s)(([^a]([^]+)?)|(a([^#.][^]+)+)):(hover|active)/i,
6. currentSheet,doc=window.document,hoverEvents=[],activators={
7. onhover:{on:'onmouseover',off:'onmouseout'},
8. onactive:{on:'onmousedown',off:'onmouseup'}
9. }
11. functionparseStylesheets(){
12. if(!/MSIE(5|6)/.test(navigator.userAgent))return;
13. window.attachEvent('onunload',unhookHoverEvents);
14. varsheets=doc.styleSheets,l=sheets.length;
15. for(vari=0;i<l;i++)
16. parseStylesheet(sheets[i]);
17. }
18. functionparseStylesheet(sheet){
19. if(sheet.imports){
20. try{
21. varimports=sheet.imports,l=imports.length;
22. for(vari=0;i<l;i++)parseStylesheet(sheet.imports[i]);
23. }catch(securityException){}
24. }
26. try{
27. varrules=(currentSheet=sheet).rules,l=rules.length;
28. for(varj=0;j<l;j++)parseCSSRule(rules[j]);
29. }catch(securityException){}
30. }
32. functionparseCSSRule(rule){
33. varselect=rule.selectorText,style=rule.style.cssText;
34. if(!csshoverReg.test(select)||!style)return;
36. varpseudo=select.replace(/[^:]+:([a-z-]+).*/i,'on$1');
37. varnewSelect=select.replace(/(\.([a-z0-9_-]+):[a-z]+)|(:[a-z]+)/gi,'.$2'+pseudo);
38. varclassName=(/\.([a-z0-9_-]*on(hover|active))/i).exec(newSelect)[1];
39. varaffected=select.replace(/:(hover|active).*$/,'');
40. varelements=getElementsBySelect(affected);
41. if(elements.length==0)return;
43. currentSheet.addRule(newSelect,style);
44. for(vari=0;i<elements.length;i++)
45. newHoverElement(elements[i],className,activators[pseudo]);
46. }
48. functionHoverElement(node,className,events){
49. if(!node.hovers)node.hovers={};
50. if(node.hovers[className])return;
51. node.hovers[className]=true;
52. hookHoverEvent(node,events.on,function(){node.className+=''+className;});
53. hookHoverEvent(node,events.off,function(){node.className=node.className.replace(newRegExp('\\s+'+className,'g'),'');});
54. }
55. functionhookHoverEvent(node,type,handler){
56. node.attachEvent(type,handler);
57. hoverEvents[hoverEvents.length]={
58. node:node,type:type,handler:handler
59. };
60. }
62. functionunhookHoverEvents(){
63. for(vare,i=0;i<hoverEvents.length;i++){
64. e=hoverEvents[i];
65. e.node.detachEvent(e.type,e.handler);
66. }
67. }
69. functiongetElementsBySelect(rule){
70. varparts,nodes=[doc];
71. parts=rule.split('');
72. for(vari=0;i<parts.length;i++){
73. nodes=getSelectedNodes(parts[i],nodes);
74. }returnnodes;
75. }
76. functiongetSelectedNodes(select,elements){
77. varresult,node,nodes=[];
78. varidentify=(/\#([a-z0-9_-]+)/i).exec(select);
79. if(identify){
80. varelement=doc.getElementById(identify[1]);
81. returnelement?[element]:nodes;
82. }
84. varclassname=(/\.([a-z0-9_-]+)/i).exec(select);
85. vartagName=select.replace(/(\.|\#|\:)[a-z0-9_-]+/i,'');
86. varclassReg=classname?newRegExp('\\b'+classname[1]+'\\b'):false;
87. for(vari=0;i<elements.length;i++){
88. result=tagName?elements[i].all.tags(tagName):elements[i].all;
89. for(varj=0;j<result.length;j++){
90. node=result[j];
91. if(classReg&&!classReg.test(node.className))continue;
92. nodes[nodes.length]=node;
93. }
94. }
96. returnnodes;
97. }
98. </script>

然后在CSS文件中添加对hover.htc文件的引用，如下：

[css] view plain copy

1. div{
2. behavior:url(js/hover.htc);
3. }

此处注意引入文件的路径，一般不成功都是由路径问题引起的。添加完这两段代码后，就可以直接在CSS中对div标签使用hover啦。如下：

[css] view plain copy

1. #menuli:hoverdiv{
2. visibility:visible;
3. }