javascript鼠标悬浮行变色代码实例
如果有很多行的话，可能查看起来非常的不方便。
如果当鼠标放在某一行上的时候能够实现变色效果，那么就比较容易辨识的。
下面结合一段代码实例介绍一下如何实现此功能，代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<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 index=0;index<lis.length;index++){
if(index%2==0){
lis[index].className="gehang";
}
lis[index].index=index;
lis[index].onmouseover=function(){
this.className="bg";
}
lis[index].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 index=0;index<lis.length;index++){}，for循环遍历li元素集合中每一个li元素。
5.if(i%2==0)，求余判断是否是奇数行，因为index是从0开始的。
6.lis[index].className="gehang"，将奇数行li的的样式class属性设置为gehang。
7.lis.index=index，为li元素创建一个index属性，并且赋值为index。
8.lis.onmouseover=function(){}，为每一个li元素注册onmouseover事件处理函数。
9.this.className="bg"，将当前行的样式class属性设置为bg。
10.lis.onmouseout=function(){}，为每一个li元素注册onmouseout事件处理函数。
11.if(this.index%2==0)，这个上面已经介绍了就不多说了，下面的也是如此。
javascript鼠标悬浮行变色代码实例，这样的场景在实际项目中还是用的比较多的，关于javascript鼠标悬浮行变色代码实例就介绍到这了。
javascript鼠标悬浮行变色代码实例属于前端实例代码，有关更多实例代码大家可以查看。