我正在创建一个计算器程序，而我试图这样做，当用户将鼠标悬停在每个按钮上时，背景颜色和文本颜色会发生变化。但是，只有背景颜色只是改变而不是文本颜色。我的代码中我做错了什么？
HTML代码
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Calculator</title>
<link rel="stylesheet" type="text/css" href="calculator.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div id="calc" class="row">
<div>
<button class="btn b1">7</button>
<button class="btn b1">8</button>
<button class="btn b1">9</button>
</div>
<div>
<button class="btn b1">7</button>
<button class="btn b1">8</button>
<button class="btn b1">9</button>
</div>
<div>
<button class="btn b1">7</button>
<button class="btn b1">8</button>
<button class="btn b1">9</button>
</div>
</div>
</div>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
CSS代码
#calc{
text-align: center;
border: 2px solid #909080;
background: #c7c7c7;
}
.b1{
text-align: center;
width: 60px;
height: 60px;
color: #370000;
}
.b1:hover{
color: red;
background: #7a7a7a;
}
#buttons{
margin-left: 35%;
}
答案 0 :(得分：2)
你的风格必须重叠bootstrap风格，所以：
更改：
.b1:hover {
要
.btn.b1:hover {
#calc {
text-align: center;
border: 2px solid #909080;
background: #c7c7c7;
}
.b1 {
text-align: center;
width: 60px;
height: 60px;
color: #370000;
}
.btn.b1:hover{
color: red;
background: #7a7a7a;
}
#buttons{
margin-left: 35%;
}<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
<div id="calc" class="row">
<div>
<button class="btn b1">7</button>
<button class="btn b1">8</button>
<button class="btn b1">9</button>
</div>
<div>
<button class="btn b1">7</button>
<button class="btn b1">8</button>
<button class="btn b1">9</button>
</div>
<div>
<button class="btn b1">7</button>
<button class="btn b1">8</button>
<button class="btn b1">9</button>
</div>
</div>
</div>