解决IE6不支持li:hover鼠标经过的效果

来源：互联网发布：淘宝网上药店哪家正规编辑：程序博客网时间：2024/05/01 00:12

勇哥今天晚上在做一个带有鼠标经过的导航效果，做完后在IE8下测试很完美，当我进IE6一看，咋没效果呢！真是郁闷，网上一查结果IE6不支持li:hover这个标签，真是让我恼火，IE6我恨你。然后在网上找了两个本人比较喜欢的解决方法。

一、才用javascript代码，使IE6支持li:hover的效果
代码如下：

<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>
<div id="nav">
<ul><li>使IE6支持li:hover的效果-勇哥的博客www.ygsem.com</li></ul>
</div>

PS：记得更改document.getElementById ("nav")里的ID

二、将a标签设置为display:block；即可简单的实现IE6支持 li:hover
如：li a｛display:block;｝
li a:hover{background:#CCC;}

强烈推荐第2种方法，又简单又好用，不用记得JS代码即可轻松完成让IE6完美支持li:hover这个标签

*******************************************************************************************************************************

liziki个人注：

用第二种方法，连其他浏览器也不行了，不知道为什么，不知道大家的可用不。

另外注意网上下载的代码得检查啊，里边总会搞些东西错误，要么拼写，要么加些东西，也不知道为什么。本贴已改好，希望这篇帖子对大家有用吧。

最近又在网上找出来一种新方法：ie6只支持css1，:hover属性在IE6中只兼容a:hover，要使用li:hover,或者div：hover，只需引用一个文件就行：csshover3.htc（下载地址：http://www.xs4all.nl/~peterned/htc/csshover3.htc)，放在网站的根目录下，并在css文件中，加上body{ behavior:url("csshover3.htc");}，放在其他目录下也行，注意路径对即可。

已用过，可行！