使用Javascript解决IE6不支持li伪类li:hover

相信很多网页设计师都在头疼网页对于IE6的兼容性问题,操蛋的不统一的网页标准伤透了网页设计师的心。光是IE各版本之间的兼容性问题就已经非常棘手。昨夜,上岸QQ的鱼花了一整个通宵来对本站进行了升级,相信网友已经发现本站的变化了。

没错!本站新增了炫丽的二级导航,看到没?另外,本站更新了默认字体,换成了很细腻很光滑的Verdana字体。单是二级导航的问题就耗费我整整一个通宵的时间,就是因为IE6不支持li伪类li:hover,太坑爹了。。。目前本站二级导航已经在IE6,IE7,IE8,IE9,Chorme,Safari,Firefox等浏览器上测试过,均能正常显示。

下面就来说说如何用Javascript解决IE6不支持li伪类li:hover

实例:

<!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=utf-8″ />
<meta name=”keywords” content=”背景hover”/>
<link href=”#” type=”text/css” rel=”stylesheet” rev=”stylesheet” media=”screen” />
<style type=”text/css”>
li{background:#ddd; margin:5px 0; padding:2px 0;}
#see_list li:hover{background:red;}
</style>
<title>Ie6背景hover效果</title>
<script type=”text/javascript” 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.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>

</head>
<body>
<ul id=”see_list”>
<li>ie6 li:hover</li>
</ul>
<ul>
<li>ie6 li</li>
</ul>
</body>
</html>

试试看吧!