CSS为什么悬停仅更改背景颜色而不更改文本颜色？

Question

I'm creating a calculator program and I'm trying to make it so when user hovers over each button, the background color and text color will change. 我正在创建一个计算器程序，并且正在尝试制作它，以便当用户将鼠标悬停在每个按钮上时，背景颜色和文本颜色将发生变化。 However, only the background color is only changing and not text color. 但是，仅背景颜色仅在变化，而文本颜色则没有。 What did I do wrong in my code? 我在代码中做错了什么？

HTML Code 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 code 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%;
}

Answer 1

your style must overlap bootstrap style , so: 您的样式必须与引导样式重叠，因此：

Change: 更改：

.b1:hover {

To: 至：

.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>

CSS为什么悬停仅更改背景颜色而不更改文本颜色？

问题描述

1 个解决方案

解决方案1
2 已采纳 2017-12-17 06:20:41

CSS为什么悬停仅更改背景颜色而不更改文本颜色？

问题描述

1 个解决方案

解决方案1 2 已采纳 2017-12-17 06:20:41

解决方案1
2 已采纳 2017-12-17 06:20:41