给按钮一个颜色，实现hover,点击变色效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#main{
position:relative;
display:inline-block;
}
button{
height:30px;
line-height: 30px;
background:rgba(0,0,0,0);
font-size: 14px;
padding:0px 15px;
outline:none;
border:none;s
}
.divCan{
position: absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index: -10001;
background: green;
}
</style>
</head>
<body>
<div id="main">
<button>按扭</button>
<div class="divCan"></div>
</div>
<script type="text/javascript">
var btn=document.getElementsByTagName(‘button‘)[0];
console.log(btn)
btn.onclick=function(e){
console.log(1)
this.style.backgroundColor="rgba(0,0,0,0.20)"
}
btn.onmouseover=function(e){
this.style.backgroundColor="rgba(0,0,0,0.09)"
}
btn.onmouseout=function(e){
this.style.backgroundColor="rgba(0,0,0,0)"
}
</script>
</body>
</html>
这个其实还有点不正常；颜色出现覆盖了，且没有顺序可以言，想更好的控件按钮的颜色 可以通过添加，删除class来实现，可以出现多个class能过他们的放的位置从面能有不同的效果；有兴趣的可以试下。
时间： 2024-12-04 15:37:19