如何使用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”不会改变颜色......为什么会这样？

Answer 1

您的A标签具有自己的颜色属性。在div上更改它不会自动适用于A标记，但您必须继承必要的属性。

.readmore a
{
    background-color:inherit;
    color: inherit;
}