-1
            <div class="icons" id="facebook">
                <div class="tooltip">Facebook</div>
                <div class="minibox-facebook">
                    <a href="https://www.facebook.com" target="_blank" rel="noopener noreferrer" title="Facebook">
                        <em class="fab fa-facebook fa-2x"></em>
                    </a>
                </div>
            </div>

o css:

.minibox-facebook:hover .tooltip {
    color: red ; 
}

Quando passo o mouse sobre o fa-facebook o tooltip não muda de cor. Como resolver?

1 Resposta 1

-1

Pode utilizar o seletor :has do elemento pai validando se existe o :hover no elemento filho e, se sim, alterando a cor do outro elemento (também precisa ser filho):

#facebook:has(.minibox-facebook:hover) .tooltip {
  color: red;
}
<div class="icons" id="facebook">
  <div class="tooltip">Facebook</div>
  <div class="minibox-facebook">
    Icone
  </div>
</div>

Claro que, para isso, é bom se atentar ao suporte dos navegadores a essa funcionalidade: https://caniuse.com/css-has

Caso queira deixar um pouco mais reutilizável esse conceito, você pode trabalhar com classes do CSS para selecionar os elementos:

.highlight:has(.highlight__label:hover) .highlight__tooltip {
  color: red;
}
<div class="icons highlight" id="facebook">
  <div class="tooltip highlight__tooltip">Facebook</div>
  <div class="minibox-facebook highlight__label">Icone</div>
</div>

<div class="icons highlight" id="google">
  <div class="tooltip highlight__tooltip">Google</div>
  <div class="minibox-google highlight__label">Icone</div>
</div>

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 .