勇哥今天晚上在做一个带有鼠标经过的导航效果,做完后在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");},放在其他目录下也行,注意路径对即可。
已用过,可行!