CSS 背景颜色过渡效果不佳

Question

你好，我有这段代码:当鼠标悬停在 a 标签上时，过渡有效，但文本消失了。我该如何解决这个问题？

<header>
    <ul class="menu">
        <li><a href="#">main</a></li>
        <li><a href="#">about us</a></li>
        <li><a href="#">brands</a></li>
        <li><a href="#">gallery</a></li>
        <li><a href="#">contact</a></li>
    </ul>
</header>

<style type="text/css">

header ul li a {
    text-decoration: none;
    color: #333946;
    font-size: 20px;
    padding: 20px;
    -webkit-transition: background-color 0.5s; /* For Safari 3.1 to 6.0 */
    transition: background-color 0.5s;
}

a:hover {
    background-color: #333946;
    opacity: 0.5;
    border-radius: 3px;
}

</style>

Answer 1

您在链接(header ul li a)上设置了color: #333946，所以当您使用background-color: # 设置动画背景颜色时333946，文本淡入背景，因为它们最终具有相同的颜色。在 background-color 下面添加 color: (something else)。