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

您在链接上设置color: #333946（header ul li a），因此当您使用background-color: #333946为背景颜色设置动画时，文字会淡入背景，因为它们最终会显示相同的颜色。在color: (something else)下面添加background-color。

Answer 2

你需要color这样：）

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

Answer 3

不透明度适用于整个元素

中的文本

像这样更改您的代码

<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="#">galery</a></li>
        <li><a href="#">contact</a></li>
    </ul>
</header>

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:rgba(51,57,70,0.5);
    border-radius:3px;
}

background-color:rgba(51,57,70,0.5);是您需要的解决方案

CSS背景颜色转换效果不佳

3 个答案: