Image exchange error on dropdown button

Question

Hello.
I have a dropdown menu (bootstrap 3.3.7) that has two images that change them via css.
When the menu is active the module button should not turn gray but white.

This one below is correct.

HTML with PHP calling menu

/* Início Botão Módulos */
  .BotaoModulos
{
  background-image: url('../img/icones/new2/modulos_out.png');
  text-align: center;
  display: inline-block;
  background-position: center center;
  background-size: cover;
  width: 40px !important;
  height: 40px !important;
  color: #8B92B1 !important;
  font-size: 12px !important;
  font-family:sans-serif !important;
}
.BotaoModulos li img
{
  display: block;
}
.BotaoModulos:hover
{
  background-image: url('../img/icones/new2/modulos_in.png');
  background-position: center center;
  background-size: cover;
  width: 40px;
  height: 40px;
  color: #fff !important;
  font-size: 12px !important;
  font-family:sans-serif !important;
}
/* Fim Botão Módulos */

.LinkFav1_PF
{
  margin: 0 auto;
  background: #fff;
  width: 90px;
  height: 75px;
  padding-top: 10px;
  padding-right: 15px;
  color: #8B92B1 !important;
}

.LinkFav1_PF:hover
{
  background: rgba(249, 166, 74, 1);
  /*top: -1px;
  padding-top: 1px; */
  color: #fff !important;
  width: 90px;
  height: 75px;
}
.LinkFav1_PF:active ul li
{
  color: #fff;
}

.MenuInfFav
{
  position: relative;
  margin: 0 auto;
  width: 1000px;
  height: 38px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="col-md-1 MenuFav LinkFav1_PF" style="margin-top: -1px;">
      <ul>
          <li class="BotaoModulos">teste
          <!-- Aqui eu tenho uma chamada PHP para o menu-left-1.ctp -->       
          </li>
      </ul>
</div>
<!-- O código abaixo é o menu que é chamado pelo código acima -->
<!-- Menu-left-1 = Prover -->

<div class="dropdown" style="border: 0px !important; border-radius: 0px;  ">
  <a class="BotaoModulos dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
  <span class="TextMenuFav" style="margin-top: 7px">Módulos</span>
  </a>

<ul class="dropdown-menu" aria-labelledby="dropdownMenu1"  style="margin: 3.3px -88px 0 !important; border-radius: 0px; background-color: #FAD88D;">

        <li>
            <?php echo $this->Html->link(__('List Users'), ['controller' => 'Users', 'action' => 'index']) ?>
        </li>
        <li>
            <?php echo $this->Html->link(__('List UsersProfiles'), ['controller' => 'UsersProfiles', 'action' => 'index']) ?>
        </li>
        <li>
            <?php echo $this->Html->link(__('List Profiles'), ['controller' => 'Profiles', 'action' => 'index']) ?>
        </li>
        <li>
            <?php echo $this->Html->link(__('List Models'), ['controller' => 'Models', 'action' => 'index']) ?>
        </li>

        <li>
            <?php echo $this->Html->link(__('List Groups'), ['controller' => 'Groups', 'action' => 'index']) ?>
        </li>
        <li>
            <?php echo $this->Html->link(__('List Maintainers'), ['controller' => 'Maintainers', 'action' => 'index']) ?>
        </li>
        <li>
            <?php echo $this->Html->link(__('List Institutions'), ['controller' => 'Institutions', 'action' => 'index']) ?>
        </li>
        <li>
            <?php echo $this->Html->link(__('List Campuses'), ['controller' => 'Campuses', 'action' => 'index']) ?>
        </li>
        <li>
            <?php echo $this->Html->link(__('List Courses'), ['controller' => 'Courses', 'action' => 'index']) ?>
        </li>
        <li>
            <?php echo $this->Html->link(__('List Semesters'), ['controller' => 'Semesters', 'action' => 'index']) ?>
        </li>

        <li>
            <?php echo $this->Html->link(__('List Financing Plans'), ['controller' => 'FinancingPlans', 'action' => 'index']) ?>
        </li>

  </ul>
</div>

Answer 1

A CSS solution is to use the "Focus" state, thus:

.BotaoModulos:hover, .BotaoModulos:focus
{
  background-image: url('../img/icones/new2/modulos_in.png');
  background-position: center center;
  background-size: cover;
  width: 40px;
  height: 40px;
  color: #fff !important;
  font-size: 12px !important;
  font-family:sans-serif !important;
}

Only problem is that when you click out, it will lose the "Focus" state, then you would have to use Javascript to add/remove a class in the click, but since you are using Bootstrap, if I’m not mistaken, the dropdown closes when you click out, then it should serve..