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

这可能对你有帮助

.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:hover{
  background-color:black !important;
}

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

Answer 2

您的代码运行良好。

在背景色之前隐藏了一些不可见的字符。

所以不是被解析为背景色， 它可能被解析为：
%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'/>

Answer 3

您的选择器没有问题。您已正确选择按钮悬停。我已经运行了你的代码，猜猜它运行良好。

我发现了为什么您的代码不起作用的问题。

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

这是你的选择器，现在检查我的选择器

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

你能看出这里有什么不同吗？这是background-color 属性后面的额外空格。我先删除了所有空格，然后添加了两个空格，然后它就按预期工作了。

在我看来，我认为您从其他地方复制了 background-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 !important;
}

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