如何实现鼠标移动按钮上，按钮变颜色的效果

jupiter418 2011-08-24 08:27:12

...全文

5199 15 打赏收藏转发到动态举报

写回复

用AI写文章

15 条回复

切换为时间正序

请发表友善的回复…

发表回复

乌镇程序员 2011-08-26

打赏
举报

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<script type="text/javascript">

window.onload = function() {

    var btn = document.getElementById('btn');

	/*

    btn.onmouseover = function() {

        this.style.backgroundColor = '#900';

        this.style.color = '#FFF';

    }

    btn.onmouseout = function() {

        this.style.backgroundColor = '';

        this.style.color = '';

    }

	*/

	//背景图

	btn.onmouseover = function() {

		this.style.backgroundImage = 'url(http://www.google.com.hk/intl/zh-CN/images/logo_cn.png)';

	}

	btn.onmouseout = function() {

		this.style.backgroundImage = 'none';

	}

	//按下后改变样式

	btn.onclick = function() {

		this.style.backgroundImage = 'url(http://www.google.com.hk/intl/zh-CN/images/logo_cn.png)';

		//重新绑定的monmouseover、onmouseout事件

		this.onmouseover = function() { }

		this.onmouseout = function() { }

	}

}

</script>

</head>



<body>

<input type="button" id="btn" value="我是只按钮" />

</body>

</html>

happytonice 2011-08-26

打赏
举报

[Quote=引用 12 楼 jupiter418 的回复:]

同时想了解，如何实现按下按钮后保持鼠标经过时的颜色？
[/Quote]
========================
只要鼠标不移开，就保持了。

jupiter418 2011-08-26

打赏
举报

</style>
<script type="text/javascript">
window.onload = function() {
var obj = document.getElementsByTagName('input');
for(var i = 0; i < obj.length; i ++) {
if (obj[i].type.toLowerCase() == 'button') {
obj[i].onmouseover = function() {
this.style.backgroundImage = 'url(/images/an1.png)';
this.style.color = '#FF0000';
}
obj[i].onmouseout = function() {
this.style.backgroundImage = '';
this.style.color = '';
}
obj[i].onclick = function() {

//重新绑定的monmouseover、onmouseout事件
this.onmouseover = function() { }
this.onmouseout = function() { }
}

}
}
}
</script>
</head>

<body>
<input type="button" id="inputBtn1" value="按钮1" />
<input type="button" id="inputBtn1" value="按钮2" />
<input type="button" id="inputBtn1" value="按钮3" />
</body>
</html>
----------------------------------------------------------------------------

点击按钮1，背景图变了，但再点击按钮2时，我希望按钮1恢复原来的背景图，如何修改代码达到这样的效果啊

jupiter418 2011-08-25

打赏
举报

同时想了解，如何实现按下按钮后保持鼠标经过时的颜色？

jupiter418 2011-08-25

打赏
举报

[Quote=引用 4 楼 t5500 的回复:]
HTML code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-eq……
[/Quote]
背景如果是修改图片，代码如何修改

Abin-2008 2011-08-25

打赏
举报

你可以用A标签啊...
直接套图片做成按钮样子...

abcd_ufo 2011-08-25

打赏
举报

那个是用样式来实现的

honeyphp 2011-08-25

打赏
举报

[Quote=引用 7 楼 blue_lg 的回复:]

原则上，不用js的话，用伪类hover也一样可以实现这个功能
<a><input type="button" value="我是只按钮" /></a>
a:hover{background-color:blue};
[/Quote]
楼上方法是不可行的

BLUE_LG 2011-08-24

打赏
举报

原则上，不用js的话，用伪类hover也一样可以实现这个功能
<a><input type="button" value="我是只按钮" /></a>
a:hover{background-color:blue};

行游客 2011-08-24

打赏
举报



<input type="button" value="移上来变色" onmouseover="this.style.backgroundColor='#ff0000';" onmouseout="this.style.backgroundColor='';">

ciznx 2011-08-24

打赏
举报



<style>

input[type=button]{background-color:blue}

input[type=button]:hover,input[type=button]:active{background-color:red}

</style>



<input type="button" value="变脸的按钮" />

乌镇程序员 2011-08-24

打赏
举报

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<script type="text/javascript">

window.onload = function() {

	var obj = document.getElementsByTagName('input');

	for(var i = 0; i < obj.length; i ++) {

		if (obj[i].type.toLowerCase() == 'button') {

			obj[i].onmouseover = function() {

				this.style.backgroundColor = '#900';

				this.style.color = '#FFF';

			}

			obj[i].onmouseout = function() {

				this.style.backgroundColor = '';

				this.style.color = '';

			}

		}

	}

}

</script>

</head>



<body>

<input type="button" value="我是只按钮" />

</body>

</html>

jupiter418 2011-08-24

打赏
举报

[Quote=引用 2 楼 t5500 的回复:]
HTML code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-eq……
[/Quote]

有多个按钮时，怎么只有第一个按钮会变颜色，要每个按钮都能变颜色如何修改啊？

乌镇程序员 2011-08-24

打赏
举报

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<script type="text/javascript">

window.onload = function() {

	var btn = document.getElementById('btn');

	btn.onmouseover = function() {

		this.style.backgroundColor = '#900';

		this.style.color = '#FFF';

	}

	btn.onmouseout = function() {

		this.style.backgroundColor = '';

		this.style.color = '';

	}

}

</script>

</head>



<body>

<input type="button" id="btn" value="我是只按钮" />

</body>

</html>

MuBeiBei 2011-08-24

打赏
举报

<button id="btn" style="background:#3F3">click me</button>

<script>

	document.getElementById('btn').onmouseover = function(){this.style.background = '#3CF'}

	document.getElementById('btn').onmouseout = function(){this.style.background = '#3F3'}

</script>