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”的颜色没有变化...这是为什么？

Answer 1

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

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