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;
}