微信公众号

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

web前端1163414年前 (2011-07-28)

IE6下不兼容li:hover，在网上看了很多类似的文章，用了很多方法都不行，后来找到了解决的办法，兼容IE6/IE7/IE8和火狐。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>li:hover在IE6下兼容的方法</title>
<script language="javascript">
stuHover = function() {
var cssRule;
var newSelector;
for (var i = 0; i < document.styleSheets.length; i++)
   for (var x = 0; x < document.styleSheets[i].rules.length ; x++)
    {
    cssRule = document.styleSheets[i].rules[x];
    if (cssRule.selectorText.indexOf("LI:hover") != -1)
    {
     newSelector = cssRule.selectorText.replace(/LI:hover/gi, "LI.iehover");
     document.styleSheets[i].addRule(newSelector , cssRule.style.cssText);
    }
   }
var getElm = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<getElm.length; i++) {
   getElm[i].onmouSEOver=function() {
    this.className+=" iehover";
   }
   getElm[i].onmouseout=function() {
    this.className=this.className.replace(new RegExp(" iehover\\b"), "");
   }
}
}
if (window.attachEvent) window.attachEvent("onload", stuHover);
</script>
<style type="text/css">
li:hover { background:#00CC00; display:block; }
</style>
</head><body >
<div id="nav">
<ul><li>让IE6支持li:hover的方法</li></ul>
</div>
</body>
</html>