按钮背景色无法改变

时间:2021-02-04 14:51:10
按钮初始的背景色是黑色,目标:触发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>

7 个解决方案

#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


引用 1 楼 daniel75122 的回复:
HTML code
<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{b…

没看出来什么改变啊,我是要按钮初始背景为黑色,鼠标移上变成白色

#4


引用 2 楼 xfsnero 的回复:
style.color是前景色 
style.backgroundColor才是背景色

style.color我是设字体颜色的

#5



<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>

#6


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>

#7


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

#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


引用 1 楼 daniel75122 的回复:
HTML code
<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{b…

没看出来什么改变啊,我是要按钮初始背景为黑色,鼠标移上变成白色

#4


引用 2 楼 xfsnero 的回复:
style.color是前景色 
style.backgroundColor才是背景色

style.color我是设字体颜色的

#5



<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>

#6


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>

#7


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