<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> body, html { margin: 0; padding: 0; } </style> </head> <body> <button id="btn1" type="button">点我1</button> </body></html>这个button模式行为鼠标点击背景颜色变深，鼠标一直不送还是变深，鼠标松开颜色变化，想了好久没想出来js应该如何模拟?求大佬们帮助一下
4 回答
慕雪6442864
TA贡献1812条经验 获得超5个赞
给你写个简单的列子
<!DOCTYPE html>
<html>
<head>
<script>
function mouseDown()
{
document.getElementById("p1").style.color="red";
}
function mouseUp()
{
document.getElementById("p1").style.color="green";
}
</script>
</head>
<body>
<p id="p1" onmousedown="mouseDown()" onmouseup="mouseUp()">
请点击文本！mouseDown() 函数当鼠标按钮在段落上被按下时触发。此函数把文本颜色设置为红色。mouseUp() 函数在鼠标按钮被释放时触发。mouseUp() 函数把文本的颜色设置为绿色。
</p>
</body>
</html>
这样就可以了
凤凰求蛊
TA贡献1825条经验 获得超4个赞
有2种方法，一种用css控制（我注释掉了），一种js控制
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body,
html {
margin: 0;
padding: 0;
}
.btn {
display: inline-block;
border-color: rgb(216, 216, 216) rgb(209, 209, 209) rgb(186, 186, 186);
border-style: solid;
border-width: 1px;
padding: 1px 7px 2px;
font-size: 12px;
cursor: default;
}
.btn:active {
/*background-color: #eee;*/
}
</style>
</head>
<body>
<button id="btn1" type="button">点我1</button>
<div id="btn2" class="btn">点我2</div>
</body>
<script>
var btn2 = document.getElementById('btn2');
btn2.addEventListener('mousedown', function (e) {
btn2.style.backgroundColor = '#eee';
})
btn2.addEventListener('mouseup', function () {
btn2.style.backgroundColor = '#fff';
});
</script>
</html>
添加回答
举报
0/150
提交
取消