您的位置:首页 > 其它

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

2012-04-07 16:35 501 查看
勇哥今天晚上在做一个带有鼠标经过的导航效果,做完后在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个人注:

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

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

最近又在网上找出来一种新方法:[b]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");},放在其他目录下也行,注意路径对即可。[/b]

[b]已用过,可行![/b]
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: