html - CSS トランジションで要素の背景とテキストの色を変更するにはどうすればよいですか?

Question

以下の背景色と文字色を変更したいですdiv。

HTML

<div class="readmore">
  <a href="#">readmore</a>
</div>

CSS

.readmore{
    width: 200px;
    text-align: right;
    background-color: #FFCC66;
    color: #336699;
}

.readmore:hover{
    background-color: #336699;
    color: #FFCC66;

    transition: all 1s;
}

にフォーカスする.readmoreと、背景色が変わるのに「readmore」の文字が変わらない・・・なぜですか？