Text and image do not change color

Question

Text and image do not change color

Navigation

#1 by (1 votes)

1

I have a few buttons that when I move the mouse, the background will turn orange but the text and the image will not change. Only when I step on top of the image does it change. I would like it to change as soon as the div becomes orange.

link

    <div class="col-md-1 MenuFav LinkFav1_PF" style="margin-top: -1px;">
         <ul>
            <li class="BotaoCorreios">
                <a href="#" class="LinkFav1">
                 <span class="TextMenuFav">Correios</span></a>
            </li>
        </ul>
   </div>
  .BotaoCorreios
{
  background-image: url('../img/icones/new2/correio_cor.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;
}
.BotaoCorreios li img
{
  display: block;
}
.BotaoCorreios:hover
{
  background-image: url('../img/icones/new2/correio_branco.png');
  background-position: center center;
  background-size: cover;
  width: 40px;
  height: 40px;
  color: #fff !important;
  font-size: 12px !important;
  font-family:sans-serif !important;
}
.BotaoCorreios>li>a
{
  background-image: url('../img/icones/new2/correio_branco.png');
  color: #fff;
}
/* Fim Botão Correios */

.LinkFav1_PF
{
  margin: 0 auto;
  background: #fff;
  width: 90px;
  height: 75px;
  padding-top: 10px;
  padding-right: 15px;

}

.LinkFav1_PF:hover, .LinkFav1_PF.open, .LinkFav1_PF:hover>a, .LinkFav1_PF.open>a
{
  background-image: url('../img/icones/new2/modulos_branco.png');
  text-align: center;
  display: inline-block;
  background-position: center center;
  background: rgba(249, 166, 74, 1);
  color: #fff !important;
  width: 90px;
  height: 75px;
}

css bootstrap-3

asked by anonymous 15.09.2017 / 17:22

1 answer

Export a mongodb collection that also brings the size of the document Index and length should refer to a location within the sequence

score 1 · Answer 1

Fabrício his CSS had some inconsistencies. In HTML I did not move, but in CSS I had to organize things better, but I did not create any new classes! I have only organized the separate classes and styles in the% correct%

When I say :hover correct is because you said that you wanted to move the mouse in the " parent " and make the " child " change. so your :hover has to be :hover Did you understand? So when you go to: hover in .pai the child changes

See in the example how it was:

.BotaoCorreios
{
  background-image: url('https://cdn3.iconfinder.com/data/icons/free-social-icons/67/facebook_circle_color-24.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;
}
.BotaoCorreios li img
{
  display: block;
}
.BotaoCorreios:hover
{
  background-position: center center;
  background-size: cover;
  width: 40px;
  height: 40px;
  color: #fff !important;
  font-size: 12px !important;
  font-family:sans-serif !important;
}
.LinkFav1_PF:hover .BotaoCorreios 
{
  background-image: url('https://cdn3.iconfinder.com/data/icons/free-social-icons/67/facebook_circle_gray-24.png');
}
.LinkFav1_PF:hover .BotaoCorreios a
{
  color: #fff;
}
.LinkFav1_PF:hover
{
  background: rgba(249, 166, 74, 1);
}
/* Fim Botão Correios */

.LinkFav1_PF
{
  margin: 0 auto;
  background: #fff;
  width: 90px;
  height: 75px;
  padding-top: 10px;
  padding-right: 15px;

}

.LinkFav1_PF.open, .LinkFav1_PF.open > a
{
  background-image: url('https://cdn3.iconfinder.com/data/icons/free-social-icons/67/facebook_circle_black-24.png');
  text-align: center;
  display: inline-block;
  background-position: center center;
  background: rgba(249, 166, 74, 1);
  color: #fff !important;
  width: 90px;
  height: 75px;
}

<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<div class="col-md-1 MenuFav LinkFav1_PF" style="margin-top: -1px;">
    <ul>
        <li class="BotaoCorreios">
            <a href="#" class="LinkFav1">
            <span class="TextMenuFav">Correios</span></a>
        </li>
    </ul>
</div>