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

Answer 2

你的代码运行良好。

有不可见的字符隐藏在background-color前面。

所以不是被解析为background-color，它可能被解析为:
%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 {
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'/>