Text and image do not change color

Asked

Viewed 42 times

1

I have some buttons that when I move the mouse, the background turns orange but the text and image do not change. Only when I step on the changing image. I’d like you to change it once the div turns orange.
inserir a descrição da imagem aqui

https://gist.github.com/FabricioDev/17b01f10f56bb35a7e80c2c02d7e767c/edit

    <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 twitter-bootstrap bootstrap-3
  • 1

    What is the class of list items? Knowing this data could do something like: . item_de_list:Hover img { background:white }

  • Would Botaocorreios?

  • You can explain this to me, @Marlysson?

  • You want to change the style of a child button element ? if you are using the selector . button:first-Child {///changes the color}

1 answer

1

Manufacturing your CSS had some inconsistencies. In HTML I didn’t touch it, but in CSS I had to organize things better, but I didn’t create any new Class! I only organized the separate classes and styles in the :hover correct

When I speak :hover correct is why you said you wanted to pass the mouse on "father" and do the "son" change. then your :hover has to be .pai:hover .filho { estilos } It seemed? So when you give :Hover no . father o . son changes

See in the example how it looked:

OBS: (touched as little as possible because you should have other CSS on the page, so it was misaligned)

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

Browser other questions tagged css twitter-bootstrap bootstrap-3

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