悬停时文字颜色不变

Question

快速CSS / HTML问题在这里，请原谅我在该领域缺乏经验。 我有一个下载按钮，我希望将鼠标悬停时从白色文本更改为灰色文本。 当前，文本为白色，但是尽管我定义了：hover属性来更改颜色，但文本仍为白色。 这是我的代码：

HTML：

<a id="postLink" class="button2" href="#">Post</a>

CSS：

.button2 {
display: inline-block;
width:163px;
color: #FFFFFF;
text-align: center;
vertical-align: middle;
padding: 12px 24px;
border: 1px solid #EFEFEF;
border-radius: 8px;
background: #589edb;
font: normal normal normal 20px raleway;
text-decoration: none;
z-index:150;
}
.button2 :hover{
 color:#555555;
}
.button2:focus {
    border: 1px solid #EFEFEF;
    background: #589edb;
    background: -webkit-gradient(linear, left top, left bottom, from(#6abeff), to(#6abeff));
    background: -moz-linear-gradient(top, #589edb, #589edb);
    background: linear-gradient(to bottom, #589edb, #589edb);
    text-decoration: none;
}
.button2:active {
    background: #589edb;
    color:#FFFFFF;

}
#postLink{
  color:#FFFFFF;

  &:hover{
    color:#55555;
}
}

谢谢！

Answer 1

您的.button2 :hover应该是.button2:hover空格将其拧紧;）

我会删除

#postLink{
  color:#FFFFFF;

  &:hover{
    color:#55555;
}
}

因为它什么也没添加，可能会破坏您的代码。 您正在使用LessCSS还是SASS？ 否则， &:hover将不起作用。 然后， #postLink将优先处理该类，并将其保持白色。