CODEWITHSUNDEEP
css
Val Do
Val Do

Reputation: 2695

CSS background-color transition not working well

Hello I have this code: when hovering on the a tags the transition works, but text disappears. How I can fix 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>

Upvotes: 3

Views: 718

Answers (3)

Timo Jungblut
Timo Jungblut

Reputation: 664

the opacity workes on the whole element also 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;
}

the background-color:rgba(51,57,70,0.5); is the solution you need

Upvotes: 2

hlfcoding
hlfcoding

Reputation: 2542

You set the color: #333946 on your links (header ul li a), so when you animate the background color with background-color: #333946, the text fades into the background because they end up with the same color. Add color: (something else) in below background-color.

Upvotes: 5

val
val

Reputation: 250

you need color like this :)

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

Upvotes: 2

Related Questions