如何使用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标签有它自己的color属性。在div上更改它不会自动对A标签起作用，但您必须继承必要的属性。

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