按钮背景色无法改变

按钮初始的背景色是黑色，目标：触发onMouseOver后切换背景色为白色;
但鼠标移上去后却还是黑色背景，而按钮初始状态不设背景可以正常切换背景色！向有类似经验的朋友请教，源码也带上，帮忙看下<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>首页</title>
<style>
body{background-color:151E23}
#divIndexTop{width:100%;height:40px; position:absolute;}
#btnTop{border-width:0px;width:100px;height:40px; margin:0px; padding:0px;color:#666666;}
.btnTopOut{border-width:0px;width:80px;height:25px;margin:0px; padding:0px;}
.btnTopOver{border-width:0px;width:80px;height:25px;margin:0px; padding:0px;cursor:hand;font-weight:bold; background-color:#FFFFFF;}
</style>
<script src="jquery.ui-1.6/jquery-1.3.js"></script>
<script>
//加载时给头部导航条添加样式
$(function ()
{
var btns=$("#divIndexTop input");
//触发onMouseOver事件时
btns.mouseover(function ()
{
$(this).addClass("btnTopOver");
this.style.color="#000000";
})
//触发onMouseOut事件时
btns.mouseout(function ()
{
this.className="btnTopOut";
this.style.color="#666666";
})
//给导航按钮添加动态打开事件
})
</script>
</head><body>
<div id="divIndexTop" style="text-align:center; z-index:-1">
<input type="button" id="btnTop" value="首页">
<input type="button" id="btnTop" value="商品展示">
<input type="button" id="btnTop" value="站内新闻">
<input type="button" id="btnTop" value="在线聊天">
<input type="button" id="btnTop" value="留言簿">
<input type="button" id="btnTop" value="后台管理">
</div>
</body>
</html>

解决方案 »

  1.   


    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>首页</title>
    <style>
    body{background-color:151E23}
    #divIndexTop{width:100%;height:40px; position:absolute;}
    .btnTop{border-width:0px;width:80px;height:25px; margin:0px; padding:0px;color:#666666;}
    .btnTopOut{border-width:0px;width:80px;height:25px;margin:0px; padding:0px;}
    .btnTopOver{border-width:0px;width:80px;height:25px;margin:0px; padding:0px;cursor:hand;font-weight:bold; background-color:#FFFFFF;}
    </style>
    </head><body>
    <div id="divIndexTop" style="text-align:center; z-index:-1">
    <input type="button" class="btnTop" value="首页">
    <input type="button" class="btnTop" value="商品展示">
    <input type="button" class="btnTop" value="站内新闻">
    <input type="button" class="btnTop" value="在线聊天">
    <input type="button" class="btnTop" value="留言簿">
    <input type="button" class="btnTop" value="后台管理">
    </div>
    <script>
    var btns=document.getElementById("divIndexTop").getElementsByTagName("input");
        //触发onMouseOver事件时
    for(var i=0;i<btns.length;i++){
        btns[i].onmouseover=function ()
        {
            this.className="btnTopOver";
            this.style.color="#000000";
        };
        //触发onMouseOut事件时
        btns[i].onmouseout=function ()
        {
            this.className="btnTopOut";
            this.style.color="#666666";
        };
    }
    </script>
    </body>
    </html>
      

  2.   

    style.color是前景色
    style.backgroundColor才是背景色
      

  3.   


    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>首页</title>
    <style>
    body{background-color:151E23}
    #divIndexTop{width:100%;height:40px; position:absolute;}
    .btnTop{border-width:0px;width:80px;height:25px; margin:0px; padding:0px;color:#FFF;background-color:#000;}
    .btnTopOut{border-width:0px;width:80px;height:25px;margin:0px; padding:0px;color:#FFF;background-color:#000;}
    .btnTopOver{border-width:0px;width:80px;height:25px;margin:0px; padding:0px;cursor:hand;font-weight:bold; color:#666;background-color:#FFF;}
    </style>
    </head><body>
    <div id="divIndexTop" style="text-align:center; z-index:-1">
    <input type="button" class="btnTop" value="首页">
    <input type="button" class="btnTop" value="商品展示">
    <input type="button" class="btnTop" value="站内新闻">
    <input type="button" class="btnTop" value="在线聊天">
    <input type="button" class="btnTop" value="留言簿">
    <input type="button" class="btnTop" value="后台管理">
    </div>
    <script>
    var btns=document.getElementById("divIndexTop").getElementsByTagName("input");
        //触发onMouseOver事件时
    for(var i=0;i<btns.length;i++){
        btns[i].onmouseover=function ()
        {
            this.className="btnTopOver";
        };
        //触发onMouseOut事件时
        btns[i].onmouseout=function ()
        {
            this.className="btnTopOut";
        };
    }
    </script>
    </body>
    </html>
      

  4.   

    LZ错误的地方：id被重复试用了（导致JS无法生效），而且这些代码完全可以用css取代
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>首页</title>
    <style>
    #divIndexTop input {
    border: 0px; width: 80px; height: 25px; margin: 0px; padding: 0px; color: #666666;
    }
    #divIndexTop input:hover {
    cursor: hand; font-weight: bold; background: #FFFFFF; color: #000000;
    }
    </style>
    </head>
    <body>
    <div id="divIndexTop" style="text-align:center;">
    <input type="button" value="首页">
    <input type="button" value="商品展示">
    <input type="button" value="站内新闻">
    <input type="button" value="在线聊天">
    <input type="button" value="留言簿">
    <input type="button" value="后台管理">
    </div>
    </body>
    </html>
      

  5.   

    谢谢两位，答案我自己找到了，JQuery更改样式首先要remove原样式才能addClass!不过还是谢了，分送上！