IE6不支持li:hover的解决方法 

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>li:hover在IE6下兼容的方法</title>
 6 <script language="javascript">
 7 stuHover = function() {
 8 var cssRule;
 9 var newSelector;
10 for (var i = 0; i < document.styleSheets.length; i++)
11    for (var x = 0; x < document.styleSheets[i].rules.length ; x++)
12     {
13     cssRule = document.styleSheets[i].rules[x];
14     if (cssRule.selectorText.indexOf("LI:hover") != -1)
15     {
16      newSelector = cssRule.selectorText.replace(/LI:hover/gi, "LI.iehover");
17      document.styleSheets[i].addRule(newSelector , cssRule.style.cssText);
18     }
19    }
20 var getElm = document.getElementById("nav").getElementsByTagName("LI"); //ID号记得修改哦
21 for (var i=0; i<getElm.length; i++) {
22    getElm[i].onmouseover=function() {
23     this.className+=" iehover";
24    }
25    getElm[i].onmouseout=function() {
26     this.className=this.className.replace(new RegExp(" iehover\\b"), "");
27    }
28 }
29 }
30 if (window.attachEvent) window.attachEvent("onload", stuHover);
31 </script>
32 <style type="text/css">
33 li:hover { background:#00CC00; display:block; }
34 </style>
35 </head><body >
36 <div id="nav">
37 <ul><li>让IE6支持li:hover的方法</li></ul>
38 </div>
39 </body>
40 </html>

 

posted @ 2013-12-06 10:39  燕舞春天  阅读(218)  评论(0)    收藏  举报