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>
you need color
like this :)
a:hover{
background-color:#333946;
opacity:0.5;
border-radius:3px;
color:white;
}
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
.
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