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将优先考虑课程，并将其保持白色。

悬停时文字颜色不变

1 个答案: