javascript鼠标悬浮行变色代码实例:
如果有很多行的话，可能查看起来非常的不方便，如果当鼠标放在某一行上的时候能够实现变色效果，那么就比较容易辨识的，下面结合一段代码实例介绍一下如何实现此功能，代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<head>
<title>鼠标悬浮背景变色效果-蚂蚁部落</title>
<style type="text/css">
ul
{
list-style:none;
margin:50px;
}
ul li
{
width:250px;
height:20px;
line-height:20px;
font-size:12px;
}
.gehang
{
background-color:#E6E6F2;
}
.bg
{
background-color:#A3D1D1;
}
</style>
<script type="text/javascript">
window.onload=function()
{
var box=document.getElementById("box");
var lis=box.getElementsByTagName("li");
for(var i=0;i<lis.length;i++)
{
if(i%2==0)
{
lis[i].className="gehang";
}
lis[i].index=i;
lis[i].onmouseover=function()
{
this.className="bg";
}
lis[i].onmouseout=function()
{
if(this.index%2==0)
{
this.className="gehang";
}
else
{
this.className="";
}
}
}
}
</script>
</head>
<body>
<div id="box">
<ul>
<li>蚂蚁部落欢迎您</li>
<li>只有奋斗才会有美好的未来</li>
<li>高手都是从菜鸟成长而来的</li>
<li>每一天的太阳都是新的，好好珍惜</li>
<li>衷心的祝愿每一位怀有梦想的屌丝成功</li>
<li>因为蚂蚁部落发源于草根</li>
</ul>
</div>
</body>
</html>
以上代码不仅实现鼠标悬浮背景变色效果，而且还实现了隔行变色效果，下面介绍一下实现过程:
一.实现原理:
隔行变色是通过求余判断li的奇偶行，然后给奇数行设定背景颜色，这样就是实现了隔行变色效果。当鼠标放在行的时候，再设定行的背景色，当鼠标离开的时候，再恢复到原来的状态。
二.代码注释:
1.window.onload=function(){}，当文档内容完全加载完毕再去执行函数中的代码。
2.var box=document.getElementById("box")，获取id属性值为bo的元素。
3.var lis=box.getElementsByTagName("li")，获取box元素下的li元素集合。
4.for(var i=0;i<lis.length;i++){}，for循环遍历li元素集合中每一个li元素。
5.if(i%2==0)，求余判断是否是奇数行，因为i是从0开始的。
6.lis.className="gehang"，将奇数行li的的样式class属性设置为gehang。
7.lis.index=i，为li元素创建一个index属性，并且赋值为i。
8.lis.onmouseover=function(){}，为每一个li元素注册onmouseover事件处理函数。
9.this.className="bg"，将当前行的样式class属性设置为bg。
10.lis.onmouseout=function(){}，为每一个li元素注册onmouseout事件处理函数。
11.if(this.index%2==0)，这个上面已经介绍了就不多说了，下面的也是如此。
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=8332
更多内容可以参阅:http://www.softwhy.com/javascript/