Цвет текста не меняется при зависании

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 будет определять приоритет над классом и будет сохранять его белым.