Galera, estou com um problema no transition
do CSS3, tenho um ícone em Font Awesome e o texto em forma de link que altera de branco para verde claro no :hover
, mas ao tirar o mouse a cor altera um na sequencia do outro, ao invés de alterar juntos.
Situação:
Meu código está disposto da seguinte forma:
@import url('https://fonts.googleapis.com/css?family=Oswald:200,300,400,500,600,700');
html * {
box-sizing: inherit;
font-size: 16px;
transition: color 0.5s ease;
}
body {
line-height: inherit;
font-family: 'Oswald', 'sans-serif';
font-size: inherit;
max-width: 100%;
padding: 0;
color: #828282;
background: #fff;
}
.header-top-menu {
height: 40px;
background-color: #393738;
max-width: 100%;
vertical-align: center;
}
.header-top-menu ul {
margin: 0;
padding: 0;
list-style: none;
}
.header-top-menu ul li {
display: inline;
font-size: 14px;
list-style: none;
}
.header-top-menu ul li a {
padding: 2px 10px;
display: inline-block;
color: #ddd;
text-decoration: none;
}
.header-top-menu ul li:hover a, .header-top-menu ul li:hover a i {
color: #d6e78d;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
<div class="header-top-menu flex-container">
<div class="content-box">
<div class="content-lt">
<ul>
<li>
<a href="mailto:email" title="Envie um e-mail pra gente :)" alt="Envie um e-mail pra gente :)" target="_blank"><i class="far fa-envelope"></i> email</a>
</li>
</ul>
</div>
</div>
</div>
Mesmo o Font Awesome usando a propriedade de color: inherit
não está dando certo. Alguma solução?
color: #ddd;
no elemento.header-top-menu ul li a i
da certo, mas tem alguma maneira de fazer isso de uma forma geral para o site todo sem ter que ficar setando cor em todos os elementos que desejo colocartransition color
?