html - CSS 按钮在悬停期间不改变颜色(css 和 html)

Question

出于某种原因，当我将鼠标悬停在按钮上时，我的代码不允许我更改按钮的背景颜色。

.button {
    display:inline-block;
    padding:0.3em 1.2em;
    margin:0 0.1em 0.1em 0;
    border:0.16em solid rgba(255,255,255,0);
    border-radius:2em;
    box-sizing: border-box;
    text-decoration:none;
    font-family:'Roboto',sans-serif;
    font-weight:300;
    color:#FFFFFF;
    text-shadow: 0 0.04em 0.04em rgba(0,0,0,0.35);
    text-align:center;
    transition: all 0.2s;
    background-color:#f14e4e
}

.button.new-quote:hover {
    background-color: black !important;
}

<input type="button" class="new-quote button" value= 'test'/>

感谢您的任何帮助。我试过把选择器变成一个按钮，我试过在代码的其他部分使用 CSS 没有运气。我正在使用括号编辑器

Answer 1

你的代码工作正常。
有隐藏的字符隐藏在背景颜色之前。
所以，而不是被解析为背景颜色，
它可能被解析为:%20%20%20background-color或者像那样奇怪的东西

.button {
    display:inline-block;
    padding:0.3em 1.2em;
    margin:0 0.1em 0.1em 0;
    border:0.16em solid rgba(255,255,255,0);
    border-radius:2em;
    box-sizing: border-box;
    text-decoration:none;
    font-family:'Roboto',sans-serif;
    font-weight:300;
    color:#FFFFFF;
    text-shadow: 0 0.04em 0.04em rgba(0,0,0,0.35);
    text-align:center;
    transition: all 0.2s;
    background-color:#f14e4e;
}


.button.new-quote:hover{
  background-color:black;
  font-size:19px;
}

   <input type="button" class="new-quote button" value='test'/>