让IE6支持li:hover的JS代码 ie6兼容性

转自:http://nihaojob.blog.163.com/blog/static/196324224201211572738/
最近在做一个网站时发现在IE6下下拉菜单竟然无法显示,于是上网查了相关资料。
原来IE6不支持除a标签以外的hover属性,我们了解hover属性是鼠标悬停效果。在IE7和FF中,对几乎任意元素都可以设置hover属性效果。而此属性效果的设置在IE6中,只对a标签有效,也就是说,IE6只能解释链接元素的悬停效果。其他元素的悬停效果IE6就不予理睬了。
没办法,只有加入JS了,也不知有其它办法没,正在关注中。
加入如下JS代码可解决问题,可对于不启动JS的浏览器那就麻烦了!
js:(document.getElementById("nav") 同时改为自己的Id)
<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>
id
<div id="nav">
<ul><li>让IE6支持LI:HOVER的JS代码</li></ul>
</div>
在做完以上工作后,却又出现了另外一个问题:
下拉菜单代码用了
<span><a>链接一</a><a>链接二</a></span>,在IE6下<a></a>,自动换行了,不是我要的IE7下的效果,看下css,原来我把span指定了width:auto;,而IE6下span 链接真发生了换行,如果要想不让它换行,需要为span指定一个宽度,于是加入了width:400px;成功解决问题。

posted on 2013-03-26 15:35  一米阳光_萍  阅读(283)  评论(0编辑  收藏  举报

导航