Clever Geek Handbook

Transition from CSS background color doesn't work well

Hello I have this code: When hovering over tags, the a

transition works, but the text disappears. How can I solve this problem?

<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>
+3


source to share


3 answers


you need color

like this :)



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


source


You set color: #333946

in your links ( header ul li a

), so when you animate the background color with background-color: #333946

, the text disappears into the background because they end up with the same color. Add color: (something else)

below background-color

.



+4


source


opacity affects the whole element and the text inside

change your code like this

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

is the solution you need

+2


source






More articles:


All Articles