Html CSS为什么悬停只改变背景颜色而不改变文本颜色？_Html_Css

Html CSS为什么悬停只改变背景颜色而不改变文本颜色？

html css

Html CSS为什么悬停只改变背景颜色而不改变文本颜色？,html,css,Html,Css,我正在创建一个计算器程序，并且我正在尝试这样做，当用户将鼠标悬停在每个按钮上时，背景颜色和文本颜色将发生变化。但是，只有背景颜色在变化，而不是文本颜色。我在代码中做错了什么 HTML代码 <html lang="en"> <head> <meta charset="UTF-8"> <title>Calculator</title> <link rel="styleshee

我正在创建一个计算器程序，并且我正在尝试这样做，当用户将鼠标悬停在每个按钮上时，背景颜色和文本颜色将发生变化。但是，只有背景颜色在变化，而不是文本颜色。我在代码中做错了什么

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>

您的样式必须与引导样式重叠，因此：

更改：

.b1:hover {

.btn.b1:hover {

至：

.b1:hover {

.btn.b1:hover {

#计算{
文本对齐：居中；
边框：2个实心#9080；
背景：#c7c7c7；
}
.b1{
文本对齐：居中；
宽度：60px；
高度：60px；
颜色：#370000；
}
.btn.b1：悬停{
颜色：红色；
背景：#7a7a；
}
#钮扣{
左边缘：35%；
}


7.
8.
9
7.
8.
9
7.
8.
9

您的样式必须与引导样式重叠，因此：

更改：

.b1:hover {

.btn.b1:hover {

至：

.b1:hover {

.btn.b1:hover {

#计算{
文本对齐：居中；
边框：2个实心#9080；
背景：#c7c7c7；
}
.b1{
文本对齐：居中；
宽度：60px；
高度：60px；
颜色：#370000；
}
.btn.b1：悬停{
颜色：红色；
背景：#7a7a；
}
#钮扣{
左边缘：35%；
}


7.
8.
9
7.
8.
9
7.
8.
9

文本颜色变为红色，其工作文本颜色变为红色，其工作为避免任何问题，最好使用button.b1而不是.btn.b1。太好了。我忘了你需要重写bootstraphi，Liamm，

。btn.b1

的优先级高于

button.b1

。为了避免任何麻烦，最好使用button.b1而不是.btn.b1。太好了。我忘了您需要覆盖bootstraphi、Liamm、

。btn.b1

的优先级高于

按钮。b1

。