Question

如何用javascript给<li>赋onmouseover事件?

代码如下:

var li_o = document.getElementsByTagName("li");
for(var i=0;i<li_o.length;i++)
{
var obj = li_o[i];
obj.onmouseover = function()
{
alert(i);
}
}

为何alert出来的都是最后个索引号,也就是有多少个li,弹出来的就是li-1个.

我的目的是使用for给所有的li加上鼠标事件,但做不到,只能给最后一个加上.高人请指点,谢过.
我想鼠标移到<li>上就改变<li>的背景颜色,移开时取消,但我不想一个li一个li地去加,想用for搞定.我的li直接html编写的.

Answer 1

你的<li>是GridView或者DataList循环出来的?

或者说.你想实现什么样儿的效果?为什么要这么写?

不管你的<li>是手工写的还是循环出来的.你都可以直接这么写:

<li onmouseover="test(this)"></li>
<script>
<!--
function test(obj){
//这里的obj就是当前的<li>.要怎么操作你自己决定.
}
//-->
</script>

-------------------

哦哦.原来是这样儿..那相当简单了..用css就可以.这么写:

<li>aaa</li>
<style>
li{ exp:expression(onmouseover = function(){this.style.color='red'},onmouseout = function(){this.style.color='black'});
}
</style>

Answer 2

obj.onmouseover = function()
{
alert(i);
}
这种方法只有最后一个才有效果，需要改成这个样子的，
var li_o = document.getElementsByTagName("li");
for(var i=0;i<li_o.length;i++)
{
var obj = li_o[i];
if (obj.addEventListener) {
obj.addEventListener( "mouseover", cgbj, false );
}
else if (obj.attachEvent) {
obj.attachEvent( "onmouseover", cgbj );
}
}
function cgbj(e)
{
e = window.event || e;
var srcElement = e.srcElement || e.target;
srcElement.style.background="blue";
//鼠标经过变色
}

Answer 3

var lis = document.getElementsByTagName("li");
for(var i=0;i<lis.length;i++) {
lis[i].setAttribute("index",i+1);//为兼容forefox,index可改成title
lis[i].onmouseover = function() {
this.style.background="red";
alert(this.index) //上面改成title以后，这行相应改成his.title
}
lis[i].onmouseout = function() {
this.style.background="";
}
}

Answer 4

<script>
document.getElementById('a').onmouseover=function(){
写代码

}
</script>

<ul>
<li id='a'></li>
</ul>

Answer 5

$("#cssmenu li").each(function () {
this.onmouseenter = function () {
this.style.background = 'rgb(51,51,51)';
};
this.onmouseleave = function () {
this.style.background = 'rgb(0,0,0)';
};

});