1

Eu tenho uns botões que quando passo o mouse, o fundo fundo fica laranja mas o texto e a imagem não mudam. Só quando passo em cima da imagem que muda. Gostaria que mudasse assim que a div ficasse laranja.
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;
}
4
  • 1
    Qual a classe dos itens de lista? Sabendo esse dados poderia fazer algo do tipo: .item_de_lista:hover img { background:white }
    – Marlysson
    Commented 15/09/2017 às 15:27
  • Seria BotaoCorreios? Commented 15/09/2017 às 15:29
  • Pode me explicar isso, @Marlysson? Commented 15/09/2017 às 15:36
  • Você quer mudar o estilo de um elemento filho do botão ? se for usa o seletor .botao:first-child {//muda a cor} Commented 15/09/2017 às 16:45

1 Resposta 1

1

Fabrício o seu CSS tinha algumas incoerências. No HTML não mexi, mas no CSS tive que organizar melhor as coisas, mas não criei nenhuma Classe nova! Só organizei as classes e os estilos separados no :hover correto

Quando falo :hover correto é pq vc falou que queria passar o mouse no "pai" e fazer o "filho" mudar. então seu :hover tem que ser .pai:hover .filho { estilos } Deu para entender? Assim quando vc da o :hover no .pai o .filho muda

Veja no exemplo como ficou:

OBS: (mexi o mínimo possível pq vc deve ter outros CSS na página, então ficou desalinhado)

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

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .