Change the color of menu items by hovering the mouse

Asked

Viewed 414 times

0

all right?

I’m having a problem with CSS, which is the following: inserir a descrição da imagem aqui

When hovering over the other menu items, I need the color of the letter to change to white, and also when the menu is selected, the item that is selected is white.

I’m using Wordpress and I get a little lost with their CSS, but I organized to show you here.

 #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 ABOVE

HTML BELOW

<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>

I already declared the color in the class but nothing happens, can help me? grateful!

css css3 css-hover
  • 1

    Puts the HTML part too, so you can better understand the structure

  • Alexandre, posted the html above

  • Use https://htmlformatter.com to make your html code readable.

1 answer

0

Add this function here in your css code:

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

You must specify the color to be transitioned within the Hover key.

On the color turn white when clicked, I suggest you take a look at the bootstrap tabs(https://getbootstrap.com/docs/4.0/components/navs/#tabs), for sure you will gain time just catching an already ready tab.

Browser other questions tagged css css3 css-hover

You are not signed in. Login or sign up in order to post.