1

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:

inserir a descrição da imagem aqui

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?

1
  • Sei que se eu adicionar o atributo 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 colocar transition color? Commented 5/04/2019 às 14:35

1 Resposta 1

3

Cara vc está com um problema nos seletores, a hierarquia não está legal. Dei uma ajustada tirando o transition do html * e parece que arrumou!

EDIT

É tb uma questão de performance de seletores, repare que se vc colocar o texto dentro de um span, tipo iconetexto vc vai ver que pode colocar * { transition } que não vai dar o bug. Mas se vc deixar o texto solto, sem estar dentro de uma tag vai dar o bug... A solução para usar no site todo é colocar todos os textos dentro de tag, não deixando nada "solto". Editei a resposta Olha ai. Teste o hover no H2 etc

@import url('https://fonts.googleapis.com/css?family=Oswald:200,300,400,500,600,700');

* {
  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,
h2:hover {
  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> 
            <span>email</span>
          </a>
        </li>
      </ul>
      <h2>Lorem, ipsum.</h2>
    </div>
  </div>
</div>

2
  • Obrigado pela ajuda Hugo! Só uma dúvida: quero usar o transition color em todo o site, como posso estar usando ele sem dar este problema e sem repetir código? Commented 5/04/2019 às 14:58
  • 1
    @LeonardoDias é uma questão de performance de seletores, repare que se vc colocar o texto dentro de um span, tipo <a href=""><i>icone</i><span>texto</span></a> vc vai ver que pode colocar * { transition } que não vai dar o bug. Mas se vc deixar o texto solto, sem estar dentro de uma tag vai dar o bug... A solução para usar no site todo é colocar todos os textos dentro de tag, não deixando nada "solto". Editei a resposta Olha ai. Teste o hover no H2 etc
    – hugocsl
    Commented 5/04/2019 às 15:49

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .