Image exchange error on the dropdown button

Question

Image exchange error on the dropdown button

Navigation

#1 by (1 votes)

1

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

Thebelowiscorrect.

HTML with PHP calling the 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>

javascript css3 bootstrap-3

asked by anonymous 08.09.2017 / 15:21

1 answer

Is it possible to use let and var in the same for loop? how to solve the problem Task 'scripts' is not in your gulpfile

score 1 · 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 away, it will lose focus state, there would have to use Javascript to add / remove a class in the click, however as you are using Bootstrap, if I am not mistaken, the dropdown closes when it clicks off then it should serve ..