让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的文件，将如下代码拷贝进去。

<attachevent="ondocumentready"handler="parseStylesheets"/>
<script>


varcsshoverReg=/(^|\s)(([^a]([^]+)?)|(a([^#.][^]+)+)):(hover|active)/i,
currentSheet,doc=window.document,hoverEvents=[],activators={
onhover:{on:'onmouseover',off:'onmouseout'},
onactive:{on:'onmousedown',off:'onmouseup'}
}

functionparseStylesheets(){
if(!/MSIE(5|6)/.test(navigator.userAgent))return;
window.attachEvent('onunload',unhookHoverEvents);
varsheets=doc.styleSheets,l=sheets.length;
for(vari=0;i<l;i++)
parseStylesheet(sheets[i]);
}
functionparseStylesheet(sheet){
if(sheet.imports){
try{
varimports=sheet.imports,l=imports.length;
for(vari=0;i<l;i++)parseStylesheet(sheet.imports[i]);
}catch(securityException){}
}

try{
varrules=(currentSheet=sheet).rules,l=rules.length;
for(varj=0;j<l;j++)parseCSSRule(rules[j]);
}catch(securityException){}
}

functionparseCSSRule(rule){
varselect=rule.selectorText,style=rule.style.cssText;
if(!csshoverReg.test(select)||!style)return;

varpseudo=select.replace(/[^:]+:([a-z-]+).*/i,'on$1');
varnewSelect=select.replace(/(\.([a-z0-9_-]+):[a-z]+)|(:[a-z]+)/gi,'.$2'+pseudo);
varclassName=(/\.([a-z0-9_-]*on(hover|active))/i).exec(newSelect)[1];
varaffected=select.replace(/:(hover|active).*$/,'');
varelements=getElementsBySelect(affected);
if(elements.length==0)return;

currentSheet.addRule(newSelect,style);
for(vari=0;i<elements.length;i++)
newHoverElement(elements[i],className,activators[pseudo]);
}

functionHoverElement(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(newRegExp('\\s+'+className,'g'),'');});
}
functionhookHoverEvent(node,type,handler){
node.attachEvent(type,handler);
hoverEvents[hoverEvents.length]={
node:node,type:type,handler:handler
};
}

functionunhookHoverEvents(){
for(vare,i=0;i<hoverEvents.length;i++){
e=hoverEvents[i];
e.node.detachEvent(e.type,e.handler);
}
}

functiongetElementsBySelect(rule){
varparts,nodes=[doc];
parts=rule.split('');
for(vari=0;i<parts.length;i++){
nodes=getSelectedNodes(parts[i],nodes);
}returnnodes;
}
functiongetSelectedNodes(select,elements){
varresult,node,nodes=[];
varidentify=(/\#([a-z0-9_-]+)/i).exec(select);
if(identify){
varelement=doc.getElementById(identify[1]);
returnelement?[element]:nodes;
}

varclassname=(/\.([a-z0-9_-]+)/i).exec(select);
vartagName=select.replace(/(\.|\#|\:)[a-z0-9_-]+/i,'');
varclassReg=classname?newRegExp('\\b'+classname[1]+'\\b'):false;
for(vari=0;i<elements.length;i++){
result=tagName?elements[i].all.tags(tagName):elements[i].all;
for(varj=0;j<result.length;j++){
node=result[j];
if(classReg&&!classReg.test(node.className))continue;
nodes[nodes.length]=node;
}
}

returnnodes;
}
</script>

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

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

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

#menuli:hoverdiv{
visibility:visible;
}