新手求助_关于JS下拉菜单选项卡(鼠标经过事件)

我是js的初学者,在练习的过程中遇到了一个没能解决的问题,就是当鼠标移动到菜单弹出选项卡里的时候没法实现改变其当前选项卡背景颜色的功能,代码如下:<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link id="link0" type="text/css" rel="stylesheet" href="ifelse.css" />
<script type="text/javascript" src="ifelse.js"></script>
<title>无标题文档</title>
</head><body id="body">
<div id="table">
<div id="kuang1">
     <p><a href="#" id="btn">下拉菜单</a></p>
        <ul id="ul1" >
         <li><a href="#" class="a1">下拉选项1</a></li>
            <li><a href="#" class="a1">下拉选项2</a></li>
            <li><a href="#" class="a1">下拉选项3</a></li>
            <li><a href="#" class="a1">下拉选项4</a></li>
            <li><a href="#" class="a1">下拉选项5</a></li>
        </ul>
    </div>
</div>
</body>
</html>// JavaScript Document
window.onload=function (){
var Btn=document.getElementById('btn');
var Ul=document.getElementById('ul1');
var A=document.getElementsByClassName('a1');

Btn.onclick=function ()
{
if(Ul.style.display=='block'){
Ul.style.display='none';
}
else{
Ul.style.display='block';
}
}

Btn.onmouseover=function ()
{
Btn.style.backgroundColor='rgba(0,90,0,1)';
Btn.style.color='rgba(240,240,240,1)';
}
Btn.onmouseout=function ()
{
Btn.style.backgroundColor='rgba(51,51,51,1)';
Btn.style.color='rgba(255,255,255,1)';
}
var i=0;//循环标记变量

for(i=0;i<=A.length;i++)
{
A[i].onmouseover=function ()
{//创建鼠标移过事件
for(i=0;i<=A.length;i++)
{
A[i].style.backgroundColor='rgba(51,51,51,1)';
}//使全部下拉选项背景色统一
this.style.backgroundColor='rgba(0,90,0,1)';
}//将选中的下拉选项框颜色改变
}
}

解决方案 »

  1.   

    你是想改变单个还是？？先看了一下 你的循环 有很大问题，你既然是从0开始的 那个肯定不能等于那个他的长度了，索引是从0开始 ，肯定最大的索引会比长度小1个，所以你必须比长度-1；所以 你要么是<=length-1;要么就是<length；这是其1
    其二：你如果想改变当前鼠标移入的这个选项，那么你就不要循环，直接利用this这个对象就可以了，首先将所有的选项恢复到初始状态，然后this.style.........='rgba()';这样就行了   还有问题可以给我发站内信