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;
}

html lang-html prettyprint-override"><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

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

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

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

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

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

你能看到这里有一点不同吗？这是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' />

Answer 3

你的代码运行良好。

背景色之前隐藏着一些看不见的字符。

因此，它不是被解析为背景色，而是可能被解析为：
背景色或类似的奇怪东西

css prettyprint-override">.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'/>