87,922
社区成员
发帖
与我相关
我的任务
分享按钮背景色无法改变
按钮初始的背景色是黑色，目标：触发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>
...全文
请发表友善的回复…
发表回复
qzw4549689 2009-06-27
- 打赏
- 举报
谢谢两位，答案我自己找到了，JQuery更改样式首先要remove原样式才能addClass!不过还是谢了，分送上！
monexus 2009-06-26
- 打赏
- 举报
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>
v轻扬v 2009-06-26
- 打赏
- 举报
<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>
qzw4549689 2009-06-26
- 打赏
- 举报
[Quote=引用 2 楼 xfsnero 的回复:]
style.color是前景色
style.backgroundColor才是背景色
[/Quote]
style.color我是设字体颜色的
style.color是前景色
style.backgroundColor才是背景色
[/Quote]
style.color我是设字体颜色的
qzw4549689 2009-06-26
- 打赏
- 举报
[Quote=引用 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…
[/Quote]
没看出来什么改变啊，我是要按钮初始背景为黑色，鼠标移上变成白色
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…
[/Quote]
没看出来什么改变啊，我是要按钮初始背景为黑色，鼠标移上变成白色
monexus 2009-06-26
- 打赏
- 举报
style.color是前景色
style.backgroundColor才是背景色
style.backgroundColor才是背景色
v轻扬v 2009-06-26
- 打赏
- 举报
<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>
