0

tudo certo?

Eu estou tendo um problema com CSS, que é o seguinte: inserir a descrição da imagem aqui

Ao passar o mouse em cima dos outros itens do menu, preciso que a cor da letra mude para branco, e também quando o menu for selecionado, o item que está selecionado fique branco.

Estou usando Wordpress e fico meio perdido com o CSS deles, porém organizei para mostrar a vcs aqui.

 #wrapper .fusion-tabs.fusion-tabs-1.clean .nav-tabs li a.tab-link{
    border-color:#ebeaea;
}
.fusion-tabs.fusion-tabs-1 .nav-tabs li a.tab-link{
    background-color:#f6f6f6;
}
.fusion-tabs.fusion-tabs-1 .nav-tabs li.active a.tab-link,.fusion-tabs.fusion-tabs-1 .nav-tabs li.active a.tab-link:hover,.fusion-tabs.fusion-tabs-1 .nav-tabs li.active a.tab-link:focus{
    background-color:#2e3c70;
  color:white;

}
.fusion-tabs.fusion-tabs-1 .nav-tabs li a:hover{
    background-color:#2e3c70;
    border-top-color:#2e3c70;
}
.fusion-tabs.fusion-tabs-1 .tab-pane{
    background-color:#2e3c70;
}
.fusion-tabs.fusion-tabs-1 .nav,.fusion-tabs.fusion-tabs-1 .nav-tabs,.fusion-tabs.fusion-tabs-1 .tab-content .tab-pane{
    border-color:#ebeaea;
}

CSS ACIMA

HTML ABAIXO

<div class="nav">
    <ul class="nav-tabs nav-justified">
        <li class="active"><a class="tab-link" data-toggle="tab" id="fusion-tab-departamentocontabil" href="#tab-8c830830f525a8839be"><h4 class="fusion-tab-heading"><i class="fontawesome-icon fa-chart-line fas" style="font-size:13px;
"></i>Departamento Contabil</h4></a></li>
        <li class=""><a class="tab-link" data-toggle="tab" id="fusion-tab-departamentofiscal" href="#tab-d79b9e0a099a6304045"><h4 class="fusion-tab-heading"><i class="fontawesome-icon fa-coins fas" style="font-size:13px;
"></i>Departamento Fiscal</h4></a></li>
        <li class=""><a class="tab-link" data-toggle="tab" id="fusion-tab-departamentopessoal" href="#tab-66b5fb7715c8dfad3f9"><h4 class="fusion-tab-heading"><i class="fontawesome-icon fa-user-edit fas" style="font-size:13px;
"></i>Departamento Pessoal</h4></a></li>
        <li class=""><a class="tab-link" data-toggle="tab" id="fusion-tab-departamentolegal" href="#tab-663288982df72fa1a53"><h4 class="fusion-tab-heading"><i class="fontawesome-icon fa-address-book fas" style="font-size:13px;
"></i>Departamento Legal</h4></a></li>
    </ul>
</div>

Já declarei a cor na classe porém não acontece nada, podem me ajudar? grato!

3
  • 1
    Coloca a parte do HTML também, pra poder entender melhor a estrutura 15/12/2019 às 3:09
  • Alexandre, postei o html acima 15/12/2019 às 3:13
  • Utilize o htmlformatter.com para poder ficar mais legível o seu código html. 15/12/2019 às 3:26

3 Respostas 3

0

Acrescenta essa função aqui no seu código css:

.tab-link:hover{
  color: #ffffff;
}

Você deve especificar a cor a ser transicionada dentro da chave do hover.

Sobre a cor ficar branca quando clicado, eu sugiro você dar uma olhada nas tabs do bootstrap(https://getbootstrap.com/docs/4.0/components/navs/#tabs), com certeza você vai ganhar tempo apenas pegando uma tab já pronta.

0

Quando passar o mouse em cima dos outros itens do menu, e a cor da letra mude você, deve usar a tag hover.

.class:hover {
  background-color: #FFF;
}

E para quando o menu for selecionado utilize a propiedade visited. Lembrando que a é o elemento HTML.

a:visited {
  background-color: #FFF
}

Não entendi muito bem que vc disse já declarar a cor na classe e que não acontece nada, mas caso não dê certo tente utilizar a tag trasition.

.class:hover {
  background: #FFF;
  trasition: background 7s;
}
-2

Ao passar o mouse em cima dos outros itens do menu para que a cor da letra mude para branco utilize a:hover,exemplo:

a:hover { 
 background-color:#6D790F;
 color: #FFFFFF;
 padding: 5px;
}

Quando o menu for selecionado para o item que está selecionado fique branco utilize a:visited,exemplo:

a:visited {
 color: #FFFFFF;
}
0

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 .