Question

jquery 转JS 关于鼠标移动加载CSS样式的

<script type="text/javascript" src="style/v2/jquery-1.4.2.min.js">
</script>
<script type="text/javascript">
$().ready(function(){
$('#navi ul li').hover(function(){
$(this).addClass('hovernavibg');
},function(){
//鼠标离开时移除divOver样式
$(this).removeClass('hovernavibg');
});
});
</script>

上面这是用JQUERY写的。
我现在想把它换成纯JS的
怎么写？
谢谢
按着这代码的意思改成JS就行
两位的答案试过。但是没效果。。
不知道为什么。
我用jquery上面写的是有效果的
我把jquery的代码换成下面两位的，不出效果。。望帮助

Answer 1

在下认为三楼的有点小问题哦，小改了一下，楼主试试。
var navi = document.getElementById("navi"),
var ul = navi.getElementByTagName("ul")[0];
var lis = ul.getElementsByTagName("li");
for ( var i=0,len=lis.length; i <len; i++) {
(function(k){
lis[i].onmouseover = function(){this.className ="hovernavibg";};
lis[i].onmouseout = function(){this.className="";};
})(i);
}//for

Answer 2

简单啊~~

var navi = document.getElementById("navi"),
lis = navi.getElementsByTagName("li");
for ( var i = 0; i < lis.length; i++) {
(function(k){
lis[i].onmouseover = function(){this.className ="hovernavibg";};
lis[i].onmouseout = function(){this.className="";};
})(i);
}//for

Answer 3

var navi = document.getElementById("navi");
var uls = navi.getElementsByTagName("ul");
for ( var i = 0; i < uls.length; i++) {
var lis = uls[i].getElementsByTagName("li");
for ( var j = 0; j < lis.length; j++) {
lis[j].onmouseover = function() {this.className = "hovernavibg"; } lis[j].onmouseout = function() {this.className="";
}
}

Answer 4

<script type="text/javascript">
//<![CDATA[
//假设导航只有一级导航
//获取ul
var ul = document.getElementById("navi").firstChild;
//然后获取li
var lis = ul.childNodes;
//注册事件
for(var li =0;li<lis.length;li++){
lis.item(li).onmouseover = function(){this.className="hovernavibg";}
lis.item(li).onmouseout = function(){this.className="";}
}
//]]>
</script>