按钮背景色无法改变

时间：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!不过还是谢了，分送上！
标签：

相关文章